前言
操作元素的 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>
运行结果如下：
对于对象语法1：class 绑定一个字面量类型的对象值，其中 red 属性值为 true，green 属性值为 false ，最终结果为绑定了red类选择器的样式。
对于对象语法2和语法3：class 绑定一个对象的名，并非具体的对象的值，该键名对应了具体的对象value值，该对象的 red 属性为true，green属性为false，最终结果为绑定了red类型选择器的样式，语法2和语法3的区别在于对象的声明在计算属性还是data中。
（2）数组语法，即class动态绑定一个数组类型
<style> .red { color: red; } .green { color: green; } </style> <div id="app"> <!-- 绑定html clas样式 --> <div :class="[classRed,classGreen]">数组语法1</div> <div :class="[isRed?‘red‘:‘‘]">数组语法2</div> <div :class="classArr">数组语法3</div> <div :class="[{red:isRed},classGreen]">数组中对象混合用法</div> </div> <script> new Vue({ el: "#app", data() { return { isRed: true, isGreen: false, classRed: "red", classGreen: "green", classArr:["red","green"], } } }) </script>
运行结果如下：
对于数组语法1：class绑定一个数组值，其中数组中的元素代表每一个类选择器的样式，最终绑定结果为red和green选择器的样式，当color样式重复，页面渲染后面的样式，颜色为绿色。
对于数组语法2：class绑定一个数组值，只有一个元素，第一个元素由条件表达式确定。样式渲染如上。
对于数组语法3：class绑定一个数组名，并非具体的数组值，该名对应了具体的数组 value 值。
对于数组语法4：class绑定一个数组，数组中第一个元素为一个对象，不难理解。
（3）代码中常用的样式绑定
<style> .red { color: red; } </style> <div id="app"> <div :class="isRed?‘red‘:‘‘">代码中常用class绑定</div> </div> <script> new Vue({ el: "#app", data() { return { isRed: true, } } }) </script>
运行结果如下：
2.style的动态绑定
<div id="app"> <!-- 绑定内联样式 --> <div :style="{color:styleRed}">对象语法1</div> <div :style="styleObj1">对象语法2</div> <div :style="styleObj2">对象语法3</div> <div :style="[styleObj1]">数组语法</div> </div> <script> new Vue({ el: "#app", data() { return { styleRed: "red", styleObj1: { color: "red" } } }, computed: { styleObj2() { return { color: "red" } } }, }) </script>
运行结果如下：
style动态绑定样式，不需要再style标签中添加对应的类选择器，和原生js修改css样式十分接近。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。