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