Vue指令：v-bind动态属性绑定

上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.

v-bind:指令会将普通属性的值变为表达值,比如

显示结果

通过示例显示的结果就了解

未使用v-bind指令的class属性的值是一个字符串,表示给标签添加一个className的类名

使用v-bind指令的class属性值不在是字符串,而是表达式, 表达式里的className不是一个普通的字符,而是一个变量,Vue实例data属性中的数据

Vue 对于v-bind指令还提供了简写方式,如下

对于v-bind指令的认识和基本使用,我们已经了解了,

那么接下来就看看v-bind使用过程中的一些问题和注意项

通过上面的学习,我们知道,v-bind 指令可以让我们将属性值关联到Vuedata数据中,这样的属性,我们称作为属性的动态绑定

属性的动态绑定比较符合vue以数据为驱动的模式,如果需要修改那个属性值,就可以直接通过修改Vue数据即可,

例如,项目中的轮播就像轮播图中的数据, 在替换轮播数据的时候就会非常方便

来个例子: 动态改变显示图片

这个时候我们只需要改变数据里的//imgq7.q578.com/ef/0807/4283ab8cfbac54df.jpg的值,图片就会发生变化

注意:

动态属性绑定, 在我们需要的时候在使用,如果一个属性的是是固定的,

并不会在未来发生改变, 就没有必要动态绑定属性.

但在属性动态绑定过程中有两个属性比较特殊, 这两个属性就是class 和style属性,

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

接下来好好研究研究

动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,

比如未使用动态绑定示例:

未使用 v-bind指令动态绑定属性时, class的值就是字符串, 上例中h2有一个类名,类名是msg

使用了动态绑定示例:

如果使用动态绑定指令, 那么此时class后面的引号不在是字符串,而是一个JavaScript表达式, msg也就成为了一个变量,因此此时h2标签的类名不是字符串msg, 而是数据中msg中的值

示例:

显示结果

此时通过示例,我们就发现使用动态绑定class属性的p,class属性值被替换为了Vue data属性中的数据, 也就是说动态绑定class属性的msg是一个变量

没有使用动态绑定class属性的值就是一个普通的字符串msg

动态绑定class 和 没有动态绑定的class可以同时使用, 不冲突,Vue会将动态class属性与普通class属性在最后显示是合并到一起

显示结果:

通过示例结果发现,这样使用,h2将有两个类名,一个是wrap, 一个是box,

其中wrap是普通class属性的值, box是动态class属性值msg变量在Vue data属性中所表示的值

我们千万不要在动态绑定class属性中像以前利用空格一样绑定多个类名

这样的写法就会报错, 那么如何才能做到使用动态属性绑定多个类名呢,

有的时候我们希望可以在一个DOM元素上动态绑定多个类名,

因为动态绑定的class值是表达式,我们就可以利用数组来罗列多个动态绑定的类名,

因此可以 v-bind:class动态绑定class值中协商数组，使用数组来罗列多个绑定的class类名

示例入校:

这样渲染出来的结果h2 标签会同时拥有box 和wrap两个类名

既然动态绑定class的值是表达式,那么我们就可以在表达式里,写一些基本的表达式处理数据,

通过逻辑的判断来决定要不要给DOM元素添加这个类名

比如

示例结果:

通过实例,我们会发现, 当isTrue 的值为 true时,h2标签有类名, 为false是,值为空字符串,无类名.

因此通过这个例子,我们就可以利用数据isTrue布尔值的判断来切换类名,改变样式

示例如下:

上面的实例, 在点击是button按钮时, 会切换h2标签的类名,同时会改变h2的字体样式.

注意:又到了教会你们,却不推荐你们使用的时刻来了

你要问我为什么不推荐用?

那么我们不妨自己想一想,如果我一个标签上有多个需要动态切换的类名怎么办

我们是不是会想到如下的写法:

如果你真的这么写了, 你会发现,后面动态绑定的class没有任何效果, 所以这种写法是有问题的

同时我们也会发现这种三目表达式切换类名也不是特别友好,

此时此刻,此情此景, 我们就不得不探讨一下两个问题?

喝口水,接着往下聊.

上回咱们聊到,如何解决如何更好的绑定多个类名的切换.

都已经知道了动态绑定class的值是表达式, 所以我们可以将 v-bind:class值 写成一个对象，以动态地切换 class：

语法说明:

因为对象可以有多个属性值对, 因此我们可以在对象中传入更多属性来动态切换多个 class。

写法说明:

此时,我们就可以利用所学重新修改上面点击改变样式案例的写法

这样我们就可以做到两个类名之间的切换, 如果希望有多个类名切换, 可以继续给对象添加属性

v-bind动态绑定属性除了class比较特殊外,还有一个style行内样式属性也比较特殊

显示结果:

需求分析：

先看看值为对象的用法

动态绑定style属性说明:

如果使用动态绑定属性style里的对象值不加引号, 就会有如下的问题:

例如

上面的这种写法就会报错, red和30px会被当做变量去Vue data属性中找对应的数据, 但是找不到就报错

正确的写法应该是这样的

也能正确显示结果, 但是要注意字符串嵌套问题

相信通过刚才的例子,你也发现了,我们发font-size 的写法改为了fontSize.

因为CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 都可以：

因此,在普通的style属性中一下两种写法都可以

但是一旦使用了动态绑定, style属性的值将变成JS表达式,

表达式里的大括号即为JS对象, 对象属性的标识符是不支持-连字符的,

如果我们有两种处理方案,

因此动态绑定需要如下写法

推荐用驼峰写法, 对象的值也可以是变量

动态属性style的样式值,CSS属性中,color 是字符串'red'值, 字体大小font-size的值确实vue数据中fontSize的值,显示结果没有任何变化

这样也会有一个不好的点,就是,如果样式特别多, 就会有点麻烦,

如何解决对象写法,当属性过多时的复杂问题呢?

因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了

而且直接绑定一个对象,看起来更清晰

示例如下:

如果我们想动态修改样式也可以如下处理

我们也可以扩展对象的用法, 给动态属性的值绑定为数组, 数组中就可以使用多组样式对象来绑定CSS样式

这样的写法,可以将样式才分, 可以做到样式复用,

*** 作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

vue官方文档对于class和style绑定有两种方法，对象语法和数组语法。

1.绑定 HTML Class对象绑定

我们用传给v-bind:class 一个对象，动态切换class 是否存在

<div v-bind:class="{ active: isActive }"></div>//这里我们使用isActive 这个变量动态判断active是否显示到html

vue对象里面

data: {

isActive:true,//判断是否显示active这个class

}

页面渲染为：

<div class="active"></div>

当然我们也可以对象中传入更多属性来动态切换多个 class，此外，v-bind:class 指令也可以与普通的 class 属性共存。

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">  动态切换多个 class</div>

vue对象里面

data: {

isActive:true,

hasError:false

}

页面渲染为：

<div class="static active">  动态切换多个 class</div>

对于上面v-bind:class 指令我们也可以传一个对象

<div v-bind:class="classObject">动态切换多个 class</div>

data: {

  classObject: {

    active: true,

    'text-danger': false

  }

}

页面渲染为：

<div class="active">  动态切换多个 class</div>

对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值

<div v-bind:class="classObject"></div>

data: {

  isActive: true,

  error: null

},

computed: {

  classObject: function () {

    return {

      active: this.isActive &&!this.error,

      'text-danger': this.error &&this.error.type === 'fatal'

    }

  }

}

2.绑定 HTML Class数组语法

除了对象语法绑定class,我们还有一种方法是数组语法，我们可以把一个数组传给 v-bind:class。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

页面渲染为

<div class="active text-danger"></div>

我们也可以通过三元表达式来进行判断切换class:

<div v-bind:class="[isActive ? activeClass : ' ', errorClass]"></div>  //这里判断是如果isActive 为true显示activeClass ，errorClass，否则只显示errorClass

对于class绑定当有多个条件 class 时这样写有些繁琐，在数组语法中也可以使用对象语法。

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

本小节我们将介绍 Vue 中数据的双向绑定指令v-model 。 v-model的学习相对简单。我们可以用v-model指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2. 木子解释

用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来 *** 作页面 DOM 的更新。

3. 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

3.1 单行文本 input

实例演示

Document

名称是: {{ name }}

12345678910111213141516171819202122232425

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。同理，我们在控制台通过 vm.name = "" 给 name 赋值时输入框的内容也会发生改变。

3.2 多行文本 textarea

实例演示

Document

描述是: {{ desc }}

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过vm.desc = ""给 desc 赋值时输入框的内容也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过v-model给单个选择框checkbox和isDelivery形成双向绑定，当checkbox改变选中状态时isDelivery也会发生改变。同理，我们在控制台通过vm.isDelivery = true给isDelivery赋值时checkbox的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给多个选择框checkbox和types形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过vm.types = []给types赋值时对应 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过vm.isFree = 0给 isFree 赋值时 radio 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过vm.company = 0给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时vm.isDelivery === 'yes' ，当没有选中时vm.isDelivery === 'no'

代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时vm.pick === vm.a 。

代码解释： 上述代码中，我们通过v-bind:value给 option 指定 value 值，当 该 option 选中时 vm.selected 的值为{ number: 123 } 。

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 （除了上述输入法组合文字时）。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

---