动态绑定class

  <body>
    <div id="root">
      <div class="pink" :class="objClass">测试</div>
      <button @click="changeBox">点击</button>
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          msg: "1111",
          objClass:{                          //绑定对象类型
              big:false
          }
        },
        methods: {
          changeBox() {
              this.objClass.big = true
          },
        },
      });
    </script>
  </body>
 

1. 绑定class样式 字符串写法   适用于：样式的类名不确定，需要动态指定

2. 绑定class样式  数组写法    适用于：要绑定的样式个数不确定，名字也不确定

3. 绑定class样式  对象写法 　适用于：要绑定的样式个数确定，名字也确定

 

posted @ 2022-05-17 15:00  小成-  阅读(124)  评论(0)    收藏  举报