一文讀懂vue動態屬性數據綁定（v-bind指令）
一、本節說明
前面的章節我們學習了如何向頁面html標簽進行插值操作，那么如果我們想動態改變html標簽的屬性，該怎么辦呢？這就是我們這節開始要講的內容v-bind.
二、 怎么做
三、 效果
四、 深入
在上圖中將a標簽的href屬性值設置為toutiao，VUE實例將自動去data里面尋找toutiao屬性進行值綁定。 不只是a標簽，所有的html標簽屬性都可以通過v-bind進行值綁定，然后通過改變數據動態改變它的屬性值。錯誤的寫法
注意一下：初學者容易犯錯,這樣寫是錯誤的，v-bind:href='http://www.gepszalag.com/bcjs/{{toutiao}}' rel='external nofollow' 。 下面的寫法也無法正常的完成屬性值綁定操作,注意雙引號中間有一對單引號。<a v-bind:href='http://www.gepszalag.com/bcjs/’toutiao’' rel='external nofollow' >今日頭條(v-bind:href)</a>
加上單引號之后，并不會進行屬性值綁定，而是將字符串原樣渲染后綁定屬性上。
v-bind綁定calss屬性(對象語法)一、本節說明
v-bind綁定元素除了上一節那種直接進行單個屬性值綁定，還可以傳入對象和數組。如：本節我們講解使用對象語法的方式對class屬性進行綁定。
我們先來看看，傳統的html的css類引用語法<h2 class='css類名1 css類名2'>html傳統寫法</h2> v-bind對象語法，我們需要隊css-class類名賦一個boolean值，來決定css類是否生效。
<h2 v-bind:class='{css類名1: true|false, css類名2: true|false}'>{{message}}</h2>
初次看這種寫法，實在是繁瑣，沒有我們直接在html標簽上寫class更加簡單。但是v-bind:class語法的好處就在于，我們可以動態的改變布爾值，來切換樣式。
問題：我們使用了v-bind:class,那么class屬性還能不能用了？ 答：可以，完全不耽誤，vue會幫你將二者合并<h2 v-bind: class='css類名3'>{{message}}</h2>
我們利用上面的語法，實現一個簡單的需求：為文字增加顏色，并點擊按鈕實現顏色的切換。
二、 怎么做
首先，定義兩個css的類，blue和red是兩個css的類名
.blue { color: blue;}.red { color: red;}
然后我們來實現視圖模型，isBlue=true表示默認設置文字的顏色是藍色的
有的時候我們會覺得在雙引號里面去寫css類有點怪異，并且IDE無提示。css類比較多的情況下，我們也可以把屬性值對象綁定，通過自定義函數來返回
三、 效果
上面兩種方式，實現的效果是一樣的，藍色的文字
四、 深入
那我們如何動態的切換顏色呢，這就需要我們自定義方法啦
視圖代碼，@click是v-on:click的簡寫形式，changeColor是我們自定義的切換顏色的方法<button @click='changeColor'>換顏色</button> 視圖模型（app），在methods代碼段加入自定義函數changeColor
changeColor(){ this.isBlue = !this.isBlue this.isRed = !this.isRed}
最終效果
一、本節說明
在上一節中，我們講了如何使用v-bind對象語法的方式綁定class屬性，并實現了樣式的切換。這一節我們來學習v-bind綁定class屬性的另外一種語法-數組語法。這種數組語法在實際應用中并不如對象語法常見，其用法容易理解，但書寫相對繁瑣。
數組語法綁定class類<div :class='[’css類名1’,’css類名2’]'>數組語法</div> 數組中嵌套對象
<div :class='[’css類名1’, ’css類名2’, {css類名3: true|false}]'> 數組中嵌套對象</div> 注意對象里面的css類名不用加單引號，和上一節用法是一致的
二、 怎么做
我們利用數組語法，實現一個和上一節對象語法一樣的需求：為文字增加顏色，并點擊按鈕實現顏色的切換。首先我們定義css類
下面是具體的實現
三、 效果
為文字增加顏色，并點擊按鈕實現顏色的切換（這里是瀏覽器截圖，點擊無效）
四、 深入：哪些數組操作是響應式的？
在上文中，我們使用數組的pop()和push()方法去操作數組元素，而不是使用this.cssArray[1] = ’blue’直接操作數組。因為這種通過下標操作數組的方式不是響應式的，也就是說雖然數組元素的值會發生變化，但不會導致頁面顏色發生切換。
所以，當我們希望通過操作數據影響頁面顯示內容及顯示效果的時候，要使用數組相關的函數，不能直接使用數組下標操作數據。下面列舉一下經常用到的響應式的數組操作函數：
push(param…) 加入元素到數組的尾部 pop() 從數組的尾部彈出一個元素 shift() 從數組的頭部移除一個元素 unshift(param…) 加入元素到數組的頭部 splice() 可以實現指定下標的數組元素的刪除、插入、替換 sort() 數組排序 reverse() 數組倒序排序如果你對這些方法還不是很熟，有必要去復習一下這些js的基礎知識。
v-bind綁定style屬性一、本節說明
上一節我們使用綁定對象或數組的語法來實現css的class類動態樣式切換，這一節我們學習綁定style屬性值實現動態的樣式。
注意：
我們使用v-bind來綁定class或style屬性的主要目的是實現：css樣式的動態切換。 如果單純的為html標簽加樣式，不需要動態切換，就不需要使用v-bind綁定。屬于畫蛇添足，自找麻煩。二、 怎么做
直接在元素上通過 :style 的形式，書寫樣式對象
<h2 :style='{color: ’red’, ’font-size’: ’40px’}'>這是一個紅色的H2</h2>
實現一個字體大小動態變化的需求
三、 效果
四、 深入
style屬性除了可以綁定一個對象，還可以使用數組綁定的語法，引用多個 data 上的樣式對象。用法如下：
在data上定義樣式：data: { style1: { color: ’red’, ’font-size’: ’40px’, ’font-weight’: ’200’ }, style2: { font-style: ’italic’ }}
在元素中，通過屬性綁定的形式，將樣式對象組成一個數組應用到元素中：
<h2 :style='[style1, style2]'>這是一個藍色的斜體的h2</h2>
以上就是一文讀懂vue動態屬性數據綁定（v-bind指令）的詳細內容，更多關于vue 動態屬性數據綁定的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備