VUE基础：Class/Style绑定
在很多业务画面，某些元素的样式是动态变化的。Vue中的Class/Style绑定就是为了实现动态样式效果的技术手段。Vue针对v-bind 用于 class 和 style 时做了针对的增强处理，表达式结果的类型除了普通的字符串之外，同时还可以支持对象以及数组类型。
6.1 Class绑定
6.1.1 简单绑定
最简单的绑定：此处active不加单引号也可以同样能够渲染。下面语句的意思是 active 这个样式是否存在取决于数据属性 isActive 的真假。
<div id="app">
<p v-bind:class="{'active': isActive}">Class简单绑定</p>
</div>
渲染结果为：
<p class="active">Class简单绑定</p>
active是定义在HTML文件中Style里面定义的样式：
<head>
<style>
.active {
color:darkblue;
}
</style>
</head>
isActive是定义在HTML文件中Script部分定义的vm中的数据：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true
}
})
</script>
6.1.2 绑定多个class
若要绑定多个class，需要逗号隔开就行。
<div id="app">
<p v-bind:class="{'active': isActive}">Class简单绑定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class复数绑定</p>
</div>
渲染结果为：
<p class="active activeTwo">Class复数绑定</p>
activeTwo是新增加的设定字体大小的属性。
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
</style>
isActiveTwo：新增加的控制第二个Class的变量。
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true
}
})
</script>
6.1.3 v-bind:class与普通Class结合
此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：
<div id="app">
<p v-bind:class="{'active': isActive}">Class简单绑定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class复数绑定</p>
<hr>
<p class="normalClass" v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class普通和绑定共存</p>
</div>
增加一个新的class
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
.normalClass {
background-color:deeppink;
}
</style>
渲染结果：
<p class="normalClass active activeTwo">Class普通和绑定共存</p>
6.1.4 v-bind绑定计算属性
在这里可以同时支持一个强大模式，绑定一个返回对象的计算属性。
<p v-bind:class="computeClass">使用计算属性绑定对象</p>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true
},
computed: {
computeClass(){
return {
active : this.isActive,
activeTwo : this.isActiveTwo,
normalClass: true
}
}
},
})
</script>
渲染结果如下：
<p class="active activeTwo normalClass">使用计算属性绑定对象</p>
6.1.5 v-bind数组
我们也可以把一个数组对象传给 v-bind:class，用来设定class列表：
<p v-bind:class="['active', 'activeTwo']">属性绑定为数组</p>
渲染结果：
<p class="active activeTwo">属性绑定为数组</p>
另外，还可以根据条件切换数组中的样式，可以用三元运算符。
<p v-bind:class="[isActive ? 'active' : '', isActiveTwo ? 'activeTwo' : '']">属性绑定为数组(使用三元运算符动态切换)</p>
渲染结果：
<p class="active activeTwo">属性绑定为数组(使用三元运算符动态切换)</p>
6.2 Style绑定
6.2.1 v-bind:style对象语法
v-bind:style 的对象语法非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<p v-bind:style="{color: colorSet, fontSize}">Style对象绑定(style="{color: colorSet, fontSize}")</p>
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px'
},
渲染结果：
<p style="color: red; font-size: 30px;">Style对象绑定(style="{color: colorSet, fontSize}")</p>
也可以直接绑定一个对象，看起来更容易让人理解。
<p v-bind:style="defaultStyle">Style对象绑定</p>
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px',
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
渲染结果：
<p style="color: red; font-size: 30px;">Style对象绑定</p>
6.2.2 v-bind:style数组绑定
v-bind:style 的数组语法可以将多个样式对象绑定到同一个元素上。
<p v-bind:style="[colorArr, fontArr]">Style数组绑定效果</p>
data : {
colorArr: {
color: 'red'
},
fontArr: {
fontSize: '30px'
},
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
渲染结果：
<p style="color: red; font-size: 30px;">Style数组绑定效果</p>
6.3 完整代码
classbindvue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE Class&Style绑定</title>
<style>
.active {
color:darkblue;
}
.activeTwo {
font-size: 30px;
}
.normalClass {
background-color:deeppink;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{'active': isActive}">Class简单绑定</p>
<hr>
<p v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class复数绑定</p>
<hr>
<p class="normalClass" v-bind:class="{'active': isActive, 'activeTwo': isActiveTwo}">Class普通和绑定共存</p>
<hr>
<p v-bind:class="computeClass">使用计算属性绑定对象</p>
<hr style= "border:5px dashed blue" />
<p v-bind:class="['active', 'activeTwo']">属性绑定为数组</p>
<hr style="border:blueviolet 2px dashed">
<p v-bind:class="[isActive ? 'active' : '', isActiveTwo ? 'activeTwo' : '']">属性绑定为数组(使用三元运算符动态切换)</p>
<hr>
<hr>
<p v-bind:style="{color: colorSet, fontSize}">Style对象绑定(style="{color: colorSet, fontSize}")</p>
<hr>
<p v-bind:style="defaultStyle">Style对象绑定</p>
<hr>
<p v-bind:style="[colorArr, fontArr]">Style数组绑定效果</p>
<hr>
<p v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">Style多属性兼容</p>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data : {
isActive : true,
isActiveTwo : true,
colorSet : 'red',
fontSize : '30px',
colorArr: {
color: 'red'
},
fontArr: {
fontSize: '30px'
},
defaultStyle: {
color : 'red',
fontSize: '30px'
}
},
computed: {
computeClass(){
return {
active : this.isActive,
activeTwo : this.isActiveTwo,
normalClass: true
}
}
},
})
</script>
</html>
显示结果：
