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如何绑定事件