简单的关注按钮切换功能实现

简单的关注按钮实现

预期效果

按钮切换：点击“关注”按钮会变成“已关注”，点击“已关注”会变成关注

实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- cdn方式引入vue2 -->
    <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>Vite App</title>
    </head>
    <body>
      <div id="app">
        <!-- v-on：click简写成@click
        isFollow是vm属性，可以直接对他操作 
        {{msg}}vue的插值语法，可以取到计算属性和属性的值-->
        <button @click="isFollow = !isFollow">{{msg}}</button>
      </div>

      <script>
        new Vue({
          el:'#app',//与模板绑定：可以使用el也可以用mount
          data() {
            return {
              isFollow:false
            }
          },
          computed:{//计算属性
            //不使用set方法可以简写
            msg(){
              return this.isFollow?'关注':'已关注'
            }
          }
        })
      </script>
  </body>
</html>

总结

使用了以下知识点：

1、vue的插值语法：

​ 使用{{}}可以取到vm中的任何值

2、vue实例对象和模板的绑定方法：使用el或者mount

3、计算属性：如果不使用set可以简写

4、事件修饰符v-on:可以简写为@

tips:
在vscode中新建一个html文件后可以输入!+tab键自动生成模板

posted @ 2023-08-19 12:08  奚罗罗  阅读(120)  评论(0)    收藏  举报