作用：动态绑定属性
bind用于绑定一个或多个属性值，比如通过Vue实例中的data绑定元素的URL，代码如下 <div id="app"> <a v-bind:href="url">{{address}}</a> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ url:"http://www.baidu.com", address:"百度" } }) </script>v-bind简写 : <a :href="url">{{address}}</a>
绑定class有两种方式： 对象语法 数组语法 （1）绑定方式：对象语法
对象语法的含义是:class后面跟的是一个对象。
用法一：直接通过{}绑定一个类 :class="{'类名': 布尔值}" <h2 :class="{'active': isActive}">Hello World</h2> 用法二：也可以通过判断，传入多个值 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2> 用法三：和普通的类同时存在，并不冲突 注：如果isActive和isLine都为true，那么会有title/active/line三个类 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2> 用法四：如果过于复杂，可以放在一个methods或者computed中 注：classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2> <style> .active { color:red; } </style> <script> var vm = new Vue({ el: '#app', data: { isActive: 'true', isLine: 'true' } }) </script>（2）绑定方式：数组语法
数组语法的含义是:class后面跟的是一个数组 用的比较少
用法一：直接通过[]绑定一个类 <h2 :class="['active']">Hello World</h2> 用法二：也可以传入多个值 <h2 :class=“[‘active’, 'line' ]">Hello World</h2> 用法三：和普通的类同时存在，并不冲突 注：会有title/active/line三个类 <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2> 用法四：如果过于复杂，可以放在一个methods或者computed中 注：classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2> <style> .active { color:red; } .line { color:blue; }