vue-class和style样式绑定

前言

　　操作元素的 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样式十分接近。

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。