前言
操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求，这些样式都属于元素的属性 attribute ，因此我们可以通过 v-bind 来动态绑定元素的样式属性。本文来总结一下这两个属性相关的知识点，便于日后的复习学习。
正文
1.class的动态绑定
（1）对象语法，即class动态绑定一个对象。
<style> .red { color: red; } .green { color: green; } </style> <div id="app"> <!-- 绑定html clas样式 --> <div :class="{red:isRed,green:isGreen}">对象语法1</div> <div :class="classObj1">对象语法2</div> <div :class="classObj2">对象语法3</div> </div> <script> new Vue({ el: "#app", data() { return { isRed: true, isGreen: false, classObj1: { red: true, green: false, }, } }, computed: { classObj2() { return { red: true, green: false, } }, }, }) </script>