Vue.js样式动态绑定实现小结

<!--vue代码-->    <div :class="{class_a:isActive,class_b:isActive_b}"></div>

4. 对象绑定

<!--vue代码-->
    <div ：class="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        classObject:{
          class_a:true,
          class_b:true
        }
      }
    }
  }
<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }
  .class_b{
    /*这里写需要设置的第二种样式*/
  }

特别说明：

这里v-bind直接利用对象进行绑定，需注意对象中的键名应与class样式名保持一致。

5. 数组绑定

数组里的变量改变时，动态更新class列表

<!--vue代码-->
    <div ：class="[classA,classB]"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        classA:'class_a',
        classB:'class_b'
      }
    }
  }
<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }
  .class_b{
    /*这里写需要设置的第二种样式*/
  }

6. 绑定返回对象的计算属性

强大且常用的模式～

<!--vue代码-->
    <div v-bind="classObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        isActive:true
      }
    },
    computed:{
      classObject:function () {
        return{
          class_a:this.isActive,
          class_b:!this.isActive
        //  这里要结合自身项目情况修改填写
        }
      }
    }
  }
<!-- CSS代码 -->
  .class_a{
    /*这里写需要设置的第一种样式*/
  }
  .class_b{
    /*这里写需要设置的第二种样式*/
  }

style属性绑定（内联）

1. 直接设置样式

<!--vue代码-->
    <div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
    export default {
      name: "test1",
      data(){
        return{
          selectedColor:pink,
          fontSize:20								 
 2/3   首页 上一页 1 2 3 下一页 尾页