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>

vue---- v-bind指令