深入解析VueJs中的V-bind指令
v-bind 主要用於屬性繫結,比方你的class屬性,style屬性,value屬性,href屬性等等,只要是屬性,就可以用v-bind指令進行繫結.這次主要介紹了VueJs中的V-bind指令,需要的朋友可以參考下
v-bind 主要用於屬性繫結,Vue官方提供了一個簡寫方式 :bind,例如:
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
一、概述 v-bind 主要用於屬性繫結,比方你的class屬性,style屬性,value屬性,href屬性等等,只要是屬性,就可以用v-bind指令進行繫結。 示例:
<!-- 繫結一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 內聯字串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 繫結 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 繫結 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 繫結一個有屬性的物件 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通過 prop 修飾符繫結 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 繫結。“prop”必須在 my-component 中宣告。--> <my-component :prop="someThing"></my-component> <!-- 通過 $props 將父元件的 props 一起傳給子元件 --> <child-component v-bind="$props"></child-component> <!-- XLink 歡迎加入全棧開發交流圈一起吹水聊天學習交流:864305860--> <svg><a :xlink:special="foo"></a></svg>
二、繫結 HTML Class
物件語法
我們可以傳給 v-bind:class 一個物件,以動態地切換 class
<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個 class 存在與否將取決於資料屬性 isActive 的 truthiness 可以在物件中傳入更多屬性來動態切換多個 class。此外,v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 和如下 data data: { isActive: true, hasError: false }//歡迎加入全棧開發交流圈一起吹水聊天學習交流:864305860
結果渲染為:
<div class="static active"></div>
當 isActive 或者 hasError 變化時,class 列表將相應地更新。例如,如果 hasError 的值為 true,class 列表將變為 "static active text-danger" 繫結的資料物件不必內聯定義在模板裡
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}//歡迎加入全棧開發交流圈一起吹水聊天學習交流:864305860
渲染的結果和上面一樣。我們也可以在這裡繫結一個返回物件的計算屬性。這是一個常用且強大的模式:
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}//歡迎加入全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
}//幫助突破技術瓶頸,提升思維能力
陣列語法
我們可以把一個數組傳給 v-bind:class,以應用一個 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染為:
<div class="active text-danger"></div>
如果你也想根據條件切換列表中的 class,可以用三元表示式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
這樣寫將始終新增 errorClass,但是隻有在 isActive 是 truthy 時才新增 activeClass。 不過,當有多個條件 class 時這樣寫有些繁瑣。所以在陣列語法中也可以使用物件語法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
三、用在元件上
當在一個自定義元件上使用 class 屬性時,這些類將被新增到該元件的根元素上面。這個元素上已經存在的類不會被覆蓋。 例如,如果你聲明瞭這個元件:
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然後在使用它的時候新增一些 class
<my-component class="baz boo"></my-component>
HTML 將被渲染為:
<p class="foo bar baz boo">Hi</p>
對於帶資料繫結 class 也同樣適用
<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 為 truthy時,HTML 將被渲染成為
<p class="foo bar active">Hi</p>
四、繫結內聯樣式
物件語法
v-bind:style 的物件語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 物件。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用單引號括起來) 來命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}//歡迎加入全棧開發交流圈一起學習交流:864305860
直接繫結到一個樣式物件通常更好,這會讓模板更清晰
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}//歡迎加入全棧開發交流圈一起吹水聊天學習交流:864305860
同樣的,物件語法常常結合返回物件的計算屬性使用
陣列語法
v-bind:style 的陣列語法可以將多個樣式物件應用到同一個元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
結語
感謝您的觀看,如有不足之處,歡迎批評指正。