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

// 注意前后名称的一致性
}
}
}

2. 也可以使用对象

（可以参照上述class）

<!--vue代码-->
    <div ：style="styleObject"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
    export default {
      name: "test1",
      data(){
        return{
          styleObject{
            selectedColor:pink,
            fontSize:20
          }
        }
      }
    }

3. 使用数组

<!--vue代码-->
    <div :style="[styleA,styleB]"></div>
<!-- 博主在这里用vue-cli做例子，小伙伴们注意与vue的区别 -->
  export default {
    name: "test1",
    data(){
      return{
        styleA:{
          color:'red',
          fontSize: '30px'
        },
        styleB:{
          color:'green',
          fontSize: '15px'
        },
      }
    }
  }

小伙伴们可根据上述方法结合自身项目情况修改调用，如有问题，欢迎交流