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

<!--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' }, } } }

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