v-bind指令用于给html标签设置属性。

基本用法

<div id="app">
  <div v-bind:id="id1">文字</div> </div> <script> new Vue({ el: '#app', data: { id1: 'myid' } }) </script>

这样得到<div id="myid">文字</div>

class 属性绑定

同时传入一个或多个类：

<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }) </script>

<div v-bind:class="{active: isActive}">文字</div>这种写法的意思是，如果isActive为true，则有active类，如果为false，则没有active类。

<div id="app">
  <div v-bind:class="{active: isActive}">文字</div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script>

如果同时多个类都要判断，则可写成<div v-bind:class="{active: isActive, highlight: isHighlight}">文字</div>。

还可以直接绑定数据里的一个对象：<div v-bind:class="classObject"></div>，其中classObject是data对象的一个子对象，名称可任意。

而且还可以绑定computed里的属性，毕竟data的数据是静态的，computed的属性可以计算：

<div id="app">
  <div v-bind:class="classObject">文字</div> </div> <script> new Vue({ el: '#app', computed: { classObject: function () { // 计算过程省略，假设得出了isActive和isDanger的布尔值 return { 'active': isActive, 'text-danger': isDanger } } } }) </script>

style 属性绑定

跟class属性绑定是一样的道理。

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30 } }) </script>

配合v-model实现数据绑定

数据绑定的含义这里先不细说，就先理解为：各种代码之间有数据关联，牵一发而动全身就行了。

<style>
.class1{
  background: #444; color: #eee; } </style> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="cssa" id="r1"> <br><br> <div v-bind:class="{'class1': cssa}"> 文字 </div> </div> <script> new Vue({ el: '#app', data:{ cssa: false } }); </script>

解释：

v-model="cssa"指令有2个作用，一个作用是设定<input>的初始值，也就是到底打不打勾，另一个作用是切换cssa的状态，也就是说当<input>值为false时，cssa的值也是false，当<input>值为true时，cssa的值也是true。

然后，v-bind:class="{'class1': cssa}"意味着，立即生成一个类似于<div class="">文字</div>或者<div class="class1">文字</div>的标签，具体生成哪个，由cssa的值决定。

最后，

  data:{
      cssa: false
  }

定义了cssa的初始值，就是false。它影响两者，一个是影响<input>，另一个是影响<div>。假设cssa的初始值设成true，那么，<input>会默认打钩，<div>的class也会有值class1。

注意：v-bind:冒号后面是一个赋值表达式，不要理解为html代码，也就是说v-bind:class="{'class1': cssa}"表示这个div的属性为class，值由cssa决定，尤其是“class”字符，虽然通常情况下它就是属性名，但是不要直接理解为vue在拼接html代码。

属性值拼接

<div id="app">
  <div v-bind:id="'list-' + id">文字</div> </div> <script> new Vue({ el: '#app', data: { id : 1 } }) </script>

得到<div id="list-1">文字</div>。

从v-bind:id="'list-' + id"可以看到，id="'list-' + id"确实是表达式，只有'list-'是真正的字符串。

配合过滤器实现数据加工

过滤器，其实就是作用在传递的数据上的函数。

<div id="app">
  <a v-bind:href='url | add_protocol'>文字</a> </div> <script> new Vue({ el: '#app', data: { url: 'microkof.com' }, filters: { add_protocol: function (value) { if (!value) { return ''; } else { return 'https://' + value; } } } }) </script>

比如说，我想给<a>附上href属性，不过恰好有一个问题是href的值没有协议（https://），所以我想给它加上协议，那么就定义一个过滤器（filters），过滤器的名字叫add_protocol，值是一个函数。

v-bind 缩写

v-bind由于太常用，可以缩写。缩写方式是：直接不写，从冒号开始写。

<!-- 完整语法 -->
<a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>

链接：https://www.jianshu.com/p/019b868c0279

vue---- v-bind指令