Vue课程之class和style绑定
关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们，只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组，所以本章将带你了解vue中如何绑定class和style。
.png)
7.1 style绑定
在Vue中，我们可以将DOM元素通过Vue的绑定机制，实现我们想要的样式。接下来看style如何实现绑定。
7.1.1 直接添加行内样式
我们先来看个简单基础的动画案例，大家看案例代码：
例7-1 Demo0701.html
1 <body>
2
3 <div id="app">
4 <h1 style="color:red">原生态的style样式</h1>
5 </div>
6
7 </body>
8 <script>
9
10 let vm = new Vue({
11 el: '#app',
12 });
13 </script>
14
15 </html>
程序的运行结果如下：
.png)
图 7- 1 直接在元素中加入style原生态样式
通过例7-1中，我们可以像往常一样直接在元素上添加行内样式。
7.1.2 属性绑定
在Vue中有属性绑定，我们也可以通过属性绑定直接加行内样式，如下代码所示：
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 style="color:red">原生态的style样式</h1>
<!-- 通过vue属性绑定直接添加 -->
<h1 :style="'color:red;font-size:60px;'">属性绑定添加的style样式</h1>
</div>
程序的运行结果如下：
.png)
图 7- 2 通过属性绑定添加样式
通过以上示例代码，我们发现通过属性绑定和直接添加非常像，但是大家认真观察，属性绑定必须加双重引号（双中加单，单中加双），这是因为，如果不对样式规则加引号，则默认会去Vue实例中寻找对应的数据，但是这些并不是Vue实例中的数据而是我们自己顶的规则，所以必须加引号。
7.1.3 对象绑定
刚才使用属性绑定的是一个普通的文本，一般在Vue中，属性绑定的是data中的数据，我们来看如下代码：
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 style="color:red">原生态的style样式</h1>
<!-- 通过vue属性绑定直接添加 -->
<h1 :style="'color:red;font-size:60px;background-color:pink;'">属性绑定添加的style样式</h1>
<!-- 通过vue的数据对象添加样式 -->
<h1 :style="styleObj"> 通过vue的数据对象添加样式</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
styleObj: "color:green;font-size:80px;background-color:red;",
}
});
</script>
属性绑定的是data中一个数据，该数据写的是样式规则。
也可以绑定一个对象，在该对象中使用js语法控制样式规则：
示例如下：
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 style="color:red">原生态的style样式</h1>
<!-- 通过vue属性绑定直接添加 -->
<h1 :style="'color:red;font-size:60px;background-color:pink;'">属性绑定添加的style样式</h1>
<!-- 通过vue的数据对象添加样式 -->
<h1 :style="styleObj"> 通过vue的数据对象添加样式</h1>
<!-- 通过vue的对象添加样式 -->
<h1 :style="testObj"> 通过vue的数据对象添加样式</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
styleObj: "color:green;font-size:80px;background-color:red;",
testObj: {
color: 'blue',//注意是对象，对象的各个属性之间使用逗号隔开，而不是分号
fontSize: '90px',
backgroundColor: 'pink'
}
}
});
</script>
注意：在该示例代码中，我们使用的是一个object类型的数据来定义样式，在这必须使用JavaScript操控style的语法规则来定义对象的各个属性，而且属性值必须是字符串，使用引号括起来。
7.1.4 数组绑定
在正常的样式中，一个DOM元素可以同时应用多个样式规则，在Vue中，也可以绑定到一个数组对像，同时应用多个样式规则，示例代码如下：
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 style="color:red">原生态的style样式</h1>
<!-- 通过vue属性绑定直接添加 -->
<h1 :style="'color:red;font-size:60px;background-color:pink;'">属性绑定添加的style样式</h1>
<!-- 通过vue的数据对象添加样式 -->
<h1 :style="styleObj"> 通过vue的数据对象添加样式</h1>
<!-- 通过vue的对象添加样式 -->
<h1 :style="testObj"> 通过vue的数据对象添加样式</h1>
<!-- 绑定数组 -->
<h1 :style="[styleObj,testObj]"> 绑定数组</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
styleObj: "color:green;font-size:80px;background-color:red;",
testObj: {
color: 'blue',//注意是对象，对象的各个属性之间使用逗号隔开，而不是分号
fontSize: '90px',
backgroundColor: 'pink'
}
}
});
</script>
在绑定数组的时候，数组中的元素来源于data中的数据，所以不需要加引号。
7.2 class绑定
除了进行style行内样式的绑定，也可以进行class样式的绑定。
7.2.1 原生class语法
可以直接在DOM元素上加入class属性，进行定义样式，示例如下：
<style>
.red {
color: red;
}
.bk {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 class="red bk">直接添加class样式</h1>
</div>
</body><script>
let vm = new Vue({
el: '#app',
data: {
}
});
</script>
直接在DOM元素上通过class属性添加多个class样式规则，注意此时class没有加冒号。
7.2.2 属性绑定
通过Vue的属性绑定，示例代码如下：
<style>
.red {
color: red;
}
.bk {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 class="red bk">直接添加class样式</h1>
<!-- 属性绑定添加 -->
<h1 :class="'red bk'">属性绑定添加</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
}
});
</script>
程序运行结果如下：
.png)
图 7- 3 原生态和属性绑定添加
通过属性绑定添加，后面的class类名要加引号，否则会去data中寻找red和bk这样的变量，如果加了，则是直接引用这两个class样式。
7.2.3 对象绑定
现在我们让属性绑定一个data中的数据对象，示例代码如下：
<style>
.red {
color: red;
}
.bk {
background-color: pink;
}
.fs {
font-size: larger;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<!-- 直接添加原生态的样式 -->
<h1 class="red bk">直接添加class样式</h1>
<!-- 属性绑定添加 -->
<h1 :class="'red bk'">属性绑定添加</h1>
<!-- 对象绑定 -->
<h1 :class="clsobj">对象绑定</h1>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
flag: true,
clsobj: {
'red': true,
'bk': true,
'fs': true
}
}
});
</script>
程序运行结果如下：
.png)
图 7- 4 使用Vue对象绑定
使用对象的时候，对象的属性就是class的类名，值是Boolean类型，如果是true则是启用这个类样式，否则则是不使用。
7.2.4 数组绑定
第一种：直接使用数组
style样式代码：
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
示例代码：
<!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 -->
<h2 :class="['red','thin']">这是一个很大很大的H2，大到你无法想象！！！</h2>
数组中的元素必须加引号，否则会去Vue实例中寻找对应的变量数据。
第二种：数组中使用三元表达式
示例代码：
<!-- 第二种使用方式，在数组中使用三元表达式 -->
<h3 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H3，大到你无法想象！！！</h3>
这上面使用的data中的数据flag，如果flag为true，则使用active这个class样式，否则是空样式。
第三种：数组中是data数据
示例代码：
<!-- 第三种使用方式，在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
<h4 :class="['thin', 'italic', {active:flag} ]">这是一个很大很大的H4，大到你无法想象！！！</h4>
上述示例数组中第三个元素是个对象，对象的键是style中已知存在的类名，值是boolean类型，如果为true，则采用该类样式，否则则不采用。
总结：设置class样式需要使用v-bind绑定；
1、使用[]设置样式，中括号里的样式必须加引号，否则被识别为变量；
2、可以使用对象表示class样式，键是类名，值是Boolean类型
3、使用对象类名可以不加引号，但是为了区别变量，建议加上；
7.2.5 用在组件上
当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 将被渲染为：
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 true时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>
7.3 本章小结
• Vue中使用行内样式可以属性绑定，对象绑定，和数组绑定；
• Vue中使用class样式同样是属性绑定，对象绑定和数组绑定，但是在对象绑定的时候，键是class类名，值是boolean类型的数据，如果值为真，则采用，否则则不采用；
7.4 理论试题与实践练习
1.编程题
给第六章的综合案例，使用本章的知识添加样式。
- 点赞
- 收藏
- 关注作者
评论（0）