一文讀懂vue動態屬性數據綁定（v-bind指令）

v-bind的基本用法

一、本節說明

前面的章節我們學習了如何向頁面html標簽進行插值操作，那么如果我們想動態改變html標簽的屬性，該怎么辦呢？這就是我們這節開始要講的內容v-bind.

二、 怎么做

“:”為v-bind的簡寫形式，也可稱為語法糖

三、 效果

四、 深入

在上圖中將a標簽的href屬性值設置為toutiao，VUE實例將自動去data里面尋找toutiao屬性進行值綁定。 不只是a標簽，所有的html標簽屬性都可以通過v-bind進行值綁定，然后通過改變數據動態改變它的屬性值。

錯誤的寫法

注意一下：初學者容易犯錯,這樣寫是錯誤的，v-bind:href='http://www.wxshucaidpc.com/bcjs/{{toutiao}}' rel='external nofollow' 。 下面的寫法也無法正常的完成屬性值綁定操作,注意雙引號中間有一對單引號。

<a v-bind:href='http://www.wxshucaidpc.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屬性，并實現了樣式的切換。這一節我們來學習v-bind綁定class屬性的另外一種語法-數組語法。這種數組語法在實際應用中并不如對象語法常見，其用法容易理解，但書寫相對繁瑣。

數組語法綁定class類

<div :class='[’css類名1’,’css類名2’]'>數組語法</div> 數組中嵌套對象

<div :class='[’css類名1’, ’css類名2’, {css類名3: true|false}]'> 數組中嵌套對象</div> 注意對象里面的css類名不用加單引號，和上一節用法是一致的

二、 怎么做

我們利用數組語法，實現一個和上一節對象語法一樣的需求：為文字增加顏色，并點擊按鈕實現顏色的切換。首先我們定義css類

下面是具體的實現

我們默認的定義了一個帶有css類名的數組[’bold’,’blue’]，默認是粗體藍色 使用pop()和push方法操作數組，pop是把數組最后一個元素移除，push是在數組尾部加入一個元素

三、 效果

為文字增加顏色，并點擊按鈕實現顏色的切換（這里是瀏覽器截圖，點擊無效）

四、 深入：哪些數組操作是響應式的？

在上文中，我們使用數組的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>

實現一個字體大小動態變化的需求

動態修改data.fontSize,從而達到動態改變字號大小的目的。 從上圖中，我們可以看到，可以將css樣式屬性保存在一個對象里面，綁定到style屬性上面。 抽取其中需要變化的部分，用數據模型變量來替換。從而達到動態修改樣式的效果

三、 效果

四、 深入

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 動態屬性數據綁定的資料請關注好吧啦網其它相關文章！