Vue.js_15_v-bind 指令动态绑定 Class

本系列博客汇总在这里：Vue.js 汇总

---

源码工程文件为：

一、使用说明

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

• 比如动态绑定 a 元素的 href 属性
• 比如动态绑定 img 元素的 src 属性

这个时候，我们可以使用指令：

v-bind

• 作用：动态绑定属性
• 缩写：：
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)

二、v-bind 的基本使用

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值（这个学到组件时再介绍）。

在开发中，有哪些属性需要动态进行绑定呢？还是有很多的，比如图片的链接 src、网站的链接 href、动态绑定一些类、样式等等。

通过 Vue 实例中的 data 绑定元素的 src 和 href，如下：

v-bind 的语法糖

v-bind 有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

简写方式如下：

三、v-bind 绑定 class

既然 v-bind 可以绑定一般的属性，是不是也是可以绑定 class 属性的呢？

1、对象语法

对象语法的含义是：class 后面跟的是一个对象。

用法一

直接通过 {} 绑定一个类

<h2 :class="{active: isActive}">{{message}}</h2>

用法二

也可以通过判断，传入多个值。

<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>

现在我们加入想要实现点击来改变上述状态，结合之前学过的指令，我们是可以做到的，如下：

用法三

和普通的类同时存在，并不冲突。

<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>

注：如果 isActive 和 isLine 都为 true，那么会有 title/active/line 三个类。

用法四

如果过于复杂，可以放在一个 methods 或者 computed 中。

<h2 v-bind:class="getClasses()">{{message}}</h2>

2、数组语法

数组语法的含义是：class 后面跟的是一个数组。

用法一

直接通过 [] 绑定一个类。

<h2 :class="['active']">{{message}}</h2>

用法二

也可以传入多个值。

<h2 :class="['active','line']">{{message}}</h2>

用法三

和普通的类同时存在，并不冲突。

<h2 class="title" :class="['active']">{{message}}</h2>

用法四

如果过于复杂，可以放在一个 methods 或者 computed 中。

<h2 class="title" :class="getClasses()">{{message}}</h2>

如有错误，欢迎指正！