v-bind动态绑定

一、 v-bind的基本使用

1. v-bind的基本使用

2. Class 与 Style 绑定

二、 v-bind动态绑定class

1. v-bind动态绑定class(对象语法)

2. v-bind动态绑定class(数组用法)

三、 v-for和v-bind结合

四、v-bind动态绑定style

1. v-bind动态绑定style(对象语法)

2. v-bind动态绑定style(数组语法)

一、 v-bind的基本使用

1. v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样

`{{message}}`

是将变量h2标签括起来，类似 js的innerHTML。

但是我们期望将变量 imgURL 写在如下位置，想这样导入图片是希望动态获取图片的链接，此时的 imgURL 并非变量而是 字符串 imgURL，如果要将其生效为变量，需要使用到一个标签 v-bind:，像这样，而且这里也不能使用Mustache语法，类似，这也是错误的。

v-bind的基本使用

{imgURL}}" alt=""> -->

此时vue对象中定义的 imgURL 变量和 aHerf 变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:由于用的很多，vue对他有一个语法糖的优化写法也就是:，此时修改imgURL变量图片会重新加载。

2. Class 与 Style 绑定

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

v-bind:class 可以简写为 :class。

二、 v-bind动态绑定class

1. v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

{{msg}}

{{msg}}

定义两个变量 active 和 isActive，在Dom元素中使用 :class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击文字this.isActive = !this.isActive，控制Dom元素是否有 class='active' 的属性。