vue---- v-bind指令

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