2.3　属性绑定指令

本节继续介绍Vue.js的常用指令，并了解这部分指令之间的区别。

1．v-bind属性绑定

【示例2-2】 一个HTML标签的属性，如果想要绑定动态值，就需要使用v-bind来绑定，代码如下：

从以上代码可以看出，link作为data中定义的字段，如果想要赋值给a标签上的href属性，就需要使用v-bind来绑定属性，这就是Vue.js文件中对属性进行绑定的指令。

2．v-bind绑定class属性

掌握了v-bind的用法，再来详细探讨针对class属性可以怎么绑定。之所以要进行探讨，原因在于Vue.js语法允许有多种表现形式。

1）对象格式

假设现在有若干类名，并已经写好了样式，代码如下：

让某个元素添加以上fontblue样式，或是两个样式都添加，代码如下：

<!-- 添加fontblue样式 -->
<li :class="{'fontblue': true}">蓝色文字</li>
<!-- 同时添加fontblue与bgpink两个样式 -->
<li :class="{'fontblue': true, 'bgpink': true}">蓝色文字，粉色背景</li>

在以上代码中true可以控制该元素享用其前方的类名，如果把true改为false，则样式消失，因为类名将不再添加。可以看出，类名的添加与否取决于其键-值对的值。

2）三元运算符格式

对示例2-2进行变更：如果条件为true，则让文字显示蓝色，如果条件为false，则添加粉色背景。可以通过三元运算符实现，代码如下：

这里条件为true，所以文字将显示蓝色，而不显示粉色背景。

3）数组格式

再次对示例2-3进行变更，要求蓝色文字与粉色背景同时存在。此时除了对象的写法，还可以使用数组的形式来表现，代码如下：

<li :class="['fontblue', 'bgpink']">蓝色文字、粉色背景</li>

4）函数格式

在特殊情况下，开发者还可以使用函数调用的形式来返回类名，从而给元素添加样式，代码如下：

<li :class="getClassName()">蓝色文字、粉色背景</li>

另外，还需要在methods中定义该方法，并且返回样式字符串、样式对象或样式数组格式，代码如下：

3．v-bind绑定style属性

与class属性的绑定一样，style属性的绑定也有多种表现形式。在HTML中，假如有一个元素需要写行内式的样式（如实现“红色文字”），代码如下：

<div style="color: red;">标签文字</div>

1）对象格式

在Vue.js文件中，通过v-bind操作color的值，使其动态化，便可以任意控制文字的颜色，而不像以上代码，将color的值固定化。具体实现color值动态化的代码如下：

如果同时对多个样式进行控制，如同时实现红色文字、蓝色背景，则代码如下：

2）数组格式

假如有多个样式对象，开发者希望集体呈现，那么还有数组格式，代码如下：

3）函数格式

通过函数返回值，也可以控制标签样式。这个返回值可以是对象或数组，代码如下：

本节主要讲解了属性绑定的方式，并主要强调了class与style的绑定有多种形式，这需要在项目实战中具体了解它们的使用时机。 px4BTKxEBzQEtukftdClmx5gSPQVmxAtjt1KNVdHEvPj+ZOK2g+gvmzVX8GjxTH9