学习要点：
1.Class 绑定
2.Style 绑定
本节课我们来开始学习 Vue3.x 的 class 和 style 绑定的方法。
一．Class 绑定
1. 先复习一下前面课程中 v-bind:的用法：v-bind:class 或:class 简写即可；
<style>
.red {
color: red;
}
style>
<span v-bind:class="className">Class 绑定效果span>
data() {
return {
className : 'red'
}
},
PS：再重复一次，className 如果作为 v-bind:class 参数的值，是不需要加双括号的；
2. 如果想通过一个布尔值来实现，是否要加载这个样式，那么可以改写成如下：
// 在 data() 创建一个布尔属性
isRed : false
// 当 isRed 为 false：class=''，当为 true 时：class='red'，解构语法用{}包含
// {class 名称 ： 布尔属性}
<span v-bind:class="{red : isRed}">Css 绑定效果span>
PS：这里属性 className 就没有被使用，并且支持多个 class 叠加，-号需单引号防解析错误；
v-bind:class="{red : isRed, 'big-font' : isBigFont}"
3. 判断 class 样式的布尔属性太多，且指令的参数值太复杂导致压力大，可简写：
<span v-bind:class="classObject">Css 绑定效果span>
data() {
return {
counter : 100,
classObject : {
red : true,
'big-font' : true
}
}
},
PS：使用计算属性来实现如上的功能：
// 计算属性
computed : {
classObject() {
return {
red : true,
'big-font' : true
}
}
}
4. 还有一种列表式数组方式：即你添加就有效果，不添加就没有效果，如下：
<span v-bind:class="[redClass, bigFontClass]">Css 绑定效果span>
data() {
return {
redClass : 'red',
bigFontClass : 'big-font',
}
},
PS：列表式数组也支持类似布尔是否显示，通过数组的三元来实现；
<span v-bind:class="[isRed ? redClass : '', bigFontClass]">Css 绑定效果span>
PS：三种方式第一次用建议选选其中一种，否则会比较混乱；学习后期，可根据场景查询使用；
二．Style 绑定
1. 有了 Class 绑定基础，Style 行内绑定就简单多了，方式也是类似：
// 解构绑定
<span v-bind:style="{color : styleColor}">Style 绑定效果span>
// 绑定属性对象或计算属性绑定
<span v-bind:style="StyleObject">Style 绑定效果span>
// 列表式数组绑定
<span v-bind:style="[redStyle]">Style 绑定效果span>
本文由:兰州启点网络（
www.lzqidian.com)整理发布!
启点CMS演示地址及账号
