目錄

1.基本用法

2.class和style的綁定

1）綁定class

2）綁定style

3.修飾符

1) .camel

2) .prop

---

1.基本用法

作用：動態(tài)地綁定一個或多個特性，也可以綁定動態(tài)特姓名，用法如下例

<div id="app"><!-- 綁定一個屬性, : 后的為傳遞的參數(shù) --><img v-bind:src="imageSrc"><!-- 動態(tài)特性名 (2.6.0+) --><button v-bind:[key]="value">點(diǎn)擊</button><!-- 縮寫 --><img :src="imageSrc"><button :[key]="value">點(diǎn)擊</button><!-- 內(nèi)聯(lián)字符串拼接 --><img :src="'./'+fileName"> </div const vm = new Vue({el:"#app",data:{imageSrc:"./pic1.jpg",fileName:"pic1.jpg",key: "id",value: "btn"} })

【結(jié)果】

【注】沒有參數(shù)時，可以綁定一個包含鍵值對的對象

<div v-bind="{class:'box',[key]:'my-box'}"></div>

【結(jié)果】

2.class和style的綁定

由于字符串拼接麻煩且易錯，所以在綁定class或style特性時，Vue做了增強(qiáng)，表達(dá)式的類型除了字符串之外，還可以是數(shù)組或?qū)ο蟆?/p>

1）綁定class

對象語法：可以判斷某個類名是否存在于class屬性中，如下例，red是否存在于class中，取決于isRed的真假

<div v-bind:class="{red: isRed, green:isGreen}"></div> const vm = new Vue({el: "#app",data: {isRed: true,isGreen:false} })

【結(jié)果】

數(shù)組語法：我們可以把一個數(shù)組傳給v-bind：class，以應(yīng)用一個class列表

<div v-bind:class="classList"></div> const vm = new Vue({el: "#app",data: {classList:["box", "reset"],} })

【結(jié)果】

三元表達(dá)式：在數(shù)組語法中可以使用三元表達(dá)式來切換class

<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div> const vm = new Vue({el: "#app",data: {isActive: true,activeClass: 'active',errorClass: 'error'} })

【結(jié)果】

數(shù)組中使用對象語法：

<div v-bind:class="[classA,{[classB]:isB},{[classC]:isC}]"></div> const vm = new Vue({el: "#app",data: {classA: 'A',classB: 'B',classC: 'C',isB: false,isC: true} })

【結(jié)果】

【注】v-bind：class可以和普通class共存

2）綁定style

對象語法：看著比較像css，實(shí)際上是一個JavaScript對象。CSS屬性名可以用駝峰式（camelCase）或者短橫線分隔（kebab-case）來命名，但是使用短橫線分隔時，要用引號括起來

<div v-bind:style="{fontSize:size +'px'}"></div> const vm = new Vue({el: "#app",data: {size: 300} })

【結(jié)果】

也可以直接綁定一個樣式對象，這樣模板會更清晰：

<div v-bind:style="styleObject"></div> const vm = new Vue({el: "#app",data: {styleObject: {fontSize: '300px',color: 'red'}} })

【結(jié)果】

數(shù)組語法：將多個樣式對象應(yīng)用到同一元素

<div v-bind:style="[styleObjectA,styleObjectB]"></div> const vm = new Vue({el: "#app",data: {styleObjectA: {fontSize: '300px'},styleObjectB: {color: 'red'}} })

【結(jié)果】

【注】

• 自動添加前綴：綁定style時，使用需要添加瀏覽器引擎前綴的css屬性時，如transform，Vue.js會自動偵測并添加相應(yīng)的前綴
• 多重值：從2.3.0起，可以為style綁定中的屬性提供一個包含多個值的數(shù)組，常用于提供多個帶前綴的值

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

【結(jié)果】谷歌瀏覽器打開后元素如下，該種寫法只會渲染數(shù)組中最后一個被瀏覽器支持的值。

3.修飾符

1) .camel

由于綁定特性時，會將大寫字母轉(zhuǎn)換為小寫字母，如下例

<svg :viewBox='viewBox'></svg> const vm = new Vue({el: "#app",data: {viewBox:'0 0 100 100'} })

【結(jié)果】

因此，Vue提供了v-bind修飾符camel，該修飾符允許在使用DOM模板時將v-bind屬性名稱駝峰化，如下

<svg :view-box.camel='viewBox'></svg>

2) .prop

用于綁定DOM屬性（property）

<div v-bind:text-content.prop="text"></div> const vm = new Vue({el: "#app",data: {text:'智者不如愛河'} })

【結(jié)果】

總結(jié)

以上是生活随笔為你收集整理的Vue指令篇_v-bind的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。