简单的关注按钮实现

预期效果

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

实现

<!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>