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

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

 <!-- v-bind指令 --> <a v-bind:href="link"></a>

 <!-- v-bind的缩写 --> <a :href="link"></a>

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

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

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

 <div id="app">   <p>这是文字</p> </div> <script>    //创建一个实例vm    const vm = new Vue({        el:"#app",        data:{}    }); </script>

绑定class

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

 <div id="app">   <p :class="{'active':isActive}">这是文字</p> </div> <script>    //创建一个实例vm    const vm = new Vue({        el:"#app",        data:{            isActive:true        }    }); </script>

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

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

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

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

 <p :class="{        'active':isActive,        'danger':isDanger,        'error':isError }">这是文字</p>

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

 data:{    isActive:true,    isDanger:true,    isError:false }

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

看效果：

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

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

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

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

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

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

 data:{    activeClass:'active',    errorClass:'error' }

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

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

绑定内联样式style

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

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

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

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

 data:{    colorStyle:'red' } 

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

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

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

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

本节小结

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

扩展阅读

1.《ECMAScript 6 系列》原创教程