Vue2.0学习笔记：vbind

　　经过前面的学习，我们知道可以实现事件绑定，可以实现双向数据绑定。在Vue中除了这两个指令，还有一个指令。它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。简单说，是用来绑定HTML属性。

　　HTML不同的标签具有不同的属性。我们在写标签的时候一般会根据不同的标签指定不同的属性，比如标签，我们会指定和属性。

　　但我们很多时候需要动态的给HTML标签动态指定属性的值。比如，我们这个的和是动态数据（也就是服务端传过来的）。我们需要借助Javascript来实现。在Javascript中，我们有三个方法用来控制元素的属性：

　　：获取元素上一个指定的属性值。如果指定的属性不存在，则返回或（空字符串）

　　：指定元素上的一个属性值。如果属性已经存在，则更新该值；否则将添加一个新的属性用指定的名称和值

　　：从指定的元素中删除一个属性

　　同样拿标签的和来举例。比如我们有一个默认的图片元素：

　　 

　　点击按钮就可以把“美女”切换成“野獸”。如下图所示：

　　

　　在Vue中，我们采用今天要学习的指令，事情会变得更容易的多。那么接下来的内容中，我们会看到如何用来给HTML的元素绑定属性。

　　前面也提到过了，是Vue的一个指令，主要功能是动态地绑定一个或多个特性，或一个组件到表达式。常见的使用方式有：

　　 

　　回到我们最初的示例中来，看看在Vue中怎么通过给元素绑定相应的属性。

　　 

　　这个时候数据中的、和属性的值对应绑到了元素中的、和属性上。

　　这个时候如果你在浏览器开发者的控制台上修改、和的值之后，可以看到元素对应的、和都会有所改变，如下图所示：

　　

　　上面这种指令是最简单，也是最易理解的，但实际上，Vue指令的预期值，比如中，是指令，号后面的是参数，而是我们预期想绑定的值（规范中也称其为预期值）。除了上示这样的绑定一个字符串类型变量，其实还支持一个单一的Javascript表达式（除外）。

　　在我们的实际项目中，最常见的是给元素绑定类名和样式。官方文档也特意以类名和样式绑定为例向大家介绍了的各种使用。接下来的内容，我们也以这两个部分为主线来介绍。当然，可以用来绑定HTML标签元素上任意的属性，使用方式是一样的。

　　数据绑定的一个常见需求是操作元素的列表和它的内联样式。因为它们都是属性，我们可以用处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻料峭春寒又易错。因此，在用于和时，Vue专门增强了它。表达式的结果类型除了字符串这外，还可以是对象或数组。

　　先来看给元素绑定类名。主要方式有：

　　执行运算

　　执行函数

　　对象语法

　　数组语法

　　ES6扩展语法

　　咱们依次来看这些方法怎么来操作类名。

　　执行运算执行运算，其实就是运算的表达式，简单的说，就是有来连接中多个属性，比如：

　　 

　　可以看到，和两个类名以及对应的样式已经绑定到了元素上：

　　

　　执行函数除了在中使用表达式之外，还可以使用执行函数，比如下面这个示例：

　　 

　　同样的，对应的、和类名添加到了元素上：

　　

　　对象语法我们还可以给传一个对象，这样我们就能动态的切换。同样拿前面的Button为例：

　　 

　　效果和前面的一样，把对应的类名添加到了元素上。这种方法还有其强大之处，我们可以动态的改变的类名。打开浏览器开发者工具，修改中对应的属性值：

　　

　　大家可能发现了，我们中对应的属性值都是真假值。你是否想起了前面学的指令，这样我们可以通过来实现类似的双向绑定，控制元素类名。

　　默认效果，我们三个类名都有了，对应的三个也是选中的，那是因为中对应的三个属性值都为。你可以点击每个，你可以看到改变了中的属性的值，同样也改变了的值。

　　

　　上面的示例，我们将三个值分开来写，其实为了方便，你可以把这三个值放到一个对象中：

　　 

　　我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

　　 

　　数组语法我们可以把一个数组传给，以应用一个列表：

　　 

　　也可以根据条件切换列表中的，可以使用三元表达方式。比如当为时添加，反之为时添加。

　　ES6扩展语法最前面我们看了表达式的方式来给添加类名。如果使用ES6的特性，我们可以使用双撇号来替代运算，比如：

　　 

　　得到的效果是一样的。

　　绑定内联样式和绑定类名方法有点类似。我们来看几个常见的方式。

　　对象语法的对象语法十分直观 —— 看着非常像CSS，其实它是一个Javascript对象。CSS属性名需要用驼峰方式（camelCase）书写或者配合引号的短横分隔命名（kebab-case）：

　　 

　　直接绑定到一个样式对象通常更好，让模松更清晰：

　　 

　　同样的，对象语法常常结合返回对象的计算属性使用。除了对象的方式，还可以使用数组方式：

　　 的数组语法可以将多个样式对象应用到一个元素上：

　　 

　　从 2.3.0 起你可以为  绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

　　 

　　这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 Flexbox，那么渲染结果会是 。

　　另外在写CSS属性的时候，有些属性需要添加特定的浏览器前缀。Vue比较灵活，会自动侦测并添加相应的前缀。

　　由于我们还没有接触过Vue的组件创建，接下来的内容你可以忽略。当然，如果你对Vue组件有一定的接触，可以简单的看看在组件上的运用。

　　当你在一个自定义组件上用到  属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。

　　例如，如果你声明了这个组件：

　　 

　　然后在使用它的时候添加一些 ：

　　 

　　HTML 最终将被渲染成为：

　　 

　　同样的适用于绑定 HTML class：

　　 

　　当  为 truthy 值 (译者注：truthy 不是 ，参考这里) 的时候，HTML 将被渲染成为：

　　 

　　和有点类似，也具有修饰符特性：

　　：被用于绑定 DOM 属性 ()。(差别在哪里？)

　　：将  特性名转换为 。 (从 2.1.0 开始支持)

　　：语法糖，会扩展成一个更新父组件绑定值的  侦听器

　　这篇文章介绍了Vue中的指令。通过指令可以很方便的给HTML元素绑定属性。比如最常见的给元素绑定类名或者内联样式。而且具有多种方式给元素绑定属性。比如说有条件的给元素绑定类名。

　　原文: https://www.w3cplus.com/vue/v-bind.html ? w3cplus.com