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
vue---- v-bind指令