Vue指令篇_v-bind
目錄
1.基本用法
2.class和style的綁定
1）綁定class
2）綁定style
3.修飾符
1) .camel
2) .prop
1.基本用法
作用：動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，也可以綁定動(dòng)態(tài)特姓名，用法如下例
<div id="app"><!-- 綁定一個(gè)屬性, : 后的為傳遞的參數(shù) --><img v-bind:src="imageSrc"><!-- 動(dòng)態(tài)特性名 (2.6.0+) --><button v-bind:[key]="value">點(diǎn)擊</button><!-- 縮寫(xiě) --><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é)果】
【注】沒(méi)有參數(shù)時(shí)，可以綁定一個(gè)包含鍵值對(duì)的對(duì)象
<div v-bind="{class:'box',[key]:'my-box'}"></div>【結(jié)果】
2.class和style的綁定
由于字符串拼接麻煩且易錯(cuò)，所以在綁定class或style特性時(shí)，Vue做了增強(qiáng)，表達(dá)式的類(lèi)型除了字符串之外，還可以是數(shù)組或?qū)ο蟆?/p>
1）綁定class
對(duì)象語(yǔ)法：可以判斷某個(gè)類(lèi)名是否存在于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ù)組語(yǔ)法：我們可以把一個(gè)數(shù)組傳給v-bind：class，以應(yīng)用一個(gè)class列表
<div v-bind:class="classList"></div> const vm = new Vue({el: "#app",data: {classList:["box", "reset"],} })【結(jié)果】
三元表達(dá)式：在數(shù)組語(yǔ)法中可以使用三元表達(dá)式來(lái)切換class
<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div> const vm = new Vue({el: "#app",data: {isActive: true,activeClass: 'active',errorClass: 'error'} })【結(jié)果】
數(shù)組中使用對(duì)象語(yǔ)法：
<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
對(duì)象語(yǔ)法：看著比較像css，實(shí)際上是一個(gè)JavaScript對(duì)象。CSS屬性名可以用駝峰式（camelCase）或者短橫線分隔（kebab-case）來(lái)命名，但是使用短橫線分隔時(shí)，要用引號(hào)括起來(lái)
<div v-bind:style="{fontSize:size +'px'}"></div> const vm = new Vue({el: "#app",data: {size: 300} })【結(jié)果】
也可以直接綁定一個(gè)樣式對(duì)象，這樣模板會(huì)更清晰：
<div v-bind:style="styleObject"></div> const vm = new Vue({el: "#app",data: {styleObject: {fontSize: '300px',color: 'red'}} })【結(jié)果】
數(shù)組語(yǔ)法：將多個(gè)樣式對(duì)象應(yīng)用到同一元素
<div v-bind:style="[styleObjectA,styleObjectB]"></div> const vm = new Vue({el: "#app",data: {styleObjectA: {fontSize: '300px'},styleObjectB: {color: 'red'}} })【結(jié)果】
【注】
- 自動(dòng)添加前綴：綁定style時(shí)，使用需要添加瀏覽器引擎前綴的css屬性時(shí)，如transform，Vue.js會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴
- 多重值：從2.3.0起，可以為style綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值
【結(jié)果】谷歌瀏覽器打開(kāi)后元素如下，該種寫(xiě)法只會(huì)渲染數(shù)組中最后一個(gè)被瀏覽器支持的值。
3.修飾符
1) .camel
由于綁定特性時(shí)，會(huì)將大寫(xiě)字母轉(zhuǎn)換為小寫(xiě)字母，如下例
<svg :viewBox='viewBox'></svg> const vm = new Vue({el: "#app",data: {viewBox:'0 0 100 100'} })【結(jié)果】
因此，Vue提供了v-bind修飾符camel，該修飾符允許在使用DOM模板時(shí)將v-bind屬性名稱(chēng)駝峰化，如下
<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:'智者不如愛(ài)河'} })【結(jié)果】
總結(jié)
以上是生活随笔為你收集整理的Vue指令篇_v-bind的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vue指令篇_v-if、v-else、v
- 下一篇： Vue如何绑定事件