第十一节：动态绑定class和style

在第六节的章节中，我们学会了如何给视图上的html标签绑定属性。

比如，给 <a> 标签绑定href属性，简单回忆一下：

1. <!-- v-bind指令 -->
   
2. <a v-bind:href="link"></a>
   
3. 
   
4. <!-- v-bind的缩写 -->
   
5. <a :href="link"></a>

复制代码

我们用 v-bind 指令（以后都用缩写的形式）来动态绑定一个标签的属性。

而这一节，我们特意来学习一下样式的动态绑定，因为它与普通属性的绑定略有不同，并且在实际开发中，动态绑定样式是一定会用到的知识，所以，还是值得我们用一个章节来学习一下它。

老办法，我们先来准备一个vue实例：

1. <div id="app">
   
2.    <p>这是文字</p>
   
3. </div>
   
4. <script>
   
5.     //创建一个实例vm
   
6.     const vm = new Vue({
   
7.         el:"#app",
   
8.         data:{}
   
9.     });
   
10. </script>

复制代码

绑定class

对象语法：我们动态绑定的class的值是一个对象{ }，具体怎么写我们来看看，在上面的代码上稍做修改：

1. <div id="app">
   
2.    <p :class="{'active':isActive}">这是文字</p>
   
3. </div>
   
4. <script>
   
5.     //创建一个实例vm
   
6.     const vm = new Vue({
   
7.         el:"#app",
   
8.         data:{
   
9.             isActive:true
   
10.         }
    
11.     });
    
12. </script>

复制代码

我们看到给class绑定的是一个对象：{ ‘active’ : isActive }，isActive是我们vm实例的数据，值为true，这与我们平时看到的class是一个字符串值不一样，这种写法，最后会被渲染成什么样呢？

我们运行看看渲染后的效果：

咦？class的值最后被渲染成：“active”，原来，在对象中，若该属性对应的value为true，则该属性会被渲染出来，为false，则被渲染出来。

我们尽快验证一下，我们在上面的代码上再稍作修改：

1. <p :class="{
   
2.         'active':isActive,
   
3.         'danger':isDanger,
   
4.         'error':isError
   
5. }">这是文字</p>
   

复制代码

我们给class绑定的对象多了2个key和value，我们看看实例的数据data：

1. data:{
   
2.     isActive:true,
   
3.     isDanger:true,
   
4.     isError:false
   
5. }

复制代码

isActive和isDanger的值都为true，isError都为false，猜一下，渲染出来的结果是什么？

看效果：

正和我们所预测的一样，值为true的会被成功渲染出来，为false的则不会被渲染出来。这个时候，你就可以根据需要给渲染出来的class编写样式了。

一旦vm实例对应的数据发生变化，比如isActive的值由true变成false，视图上的’active’ 类也会被删除，这样就会实现动态绑定样式啦！

除了对象语法来绑定class之外，我们还有另一种写法。

数组语法：用数组语法和对象语法来绑定class，又稍有不同。说了是数组语法，那写法就肯定不一样，我们继续来看看：

1. <p :class="[activeClass,errorClass]">
   
2.     这是文字
   
3. </p>

复制代码

这个时候，class绑定的值就是一个数组了，数组有两个元素[ activeClass , errorClass ]，它们对应的值是vm实例的数据data，我们看看vm的数据data：

1. data:{
   
2.     activeClass:'active',
   
3.     errorClass:'error'
   
4. }

复制代码

渲染的时候， activeClass和 errorClass对应的值就会被渲染成class。看效果图：

效果跟我们预期一样。这样，我们就可以修改vm实例的数据data，来实现动态修改class的样式了。

绑定内联样式style

除了使用class类以外，我们还可以在style内联样式上下功夫。

绑定内联样式也有2种语法，对象语法和数组语法，但我们这里只介绍常用的对象语法。

1. <p :style="{color:colorStyle}">
   
2.    这是文字
   
3. </p>

复制代码

这个时候，我们绑定的就不是class了，是style属性。它的值是一个对象： { color:colorStyle }，同样，我们来看看vm实例的数据data：

1. data:{
   
2.     colorStyle:'red'
   
3. } 
   

复制代码

原来 colorStyle我们vm实例的数据，值为red。那是不是我们style中的color对应的颜色是就是red呢？

没错，看来你已经会举一反三了。 看渲染效果，我们验证一样：

004.png (29.59 KB, 下载次数: 0)

下载附件

2017-5-9 15:48 上传

没毛病，成功渲染成：style=”color:red”。

因此，我们同样可以修改vm实例的数据data，来实现动态修改视图央视的效果。

本节小结

采取动态绑定class还是动态内联样式style，这个要根据需求分析来具体确定。但较为常用的还是使用绑定class。