詳解vue動(dòng)態(tài)屬性數(shù)據(jù)綁定

小編這次要給大家分享的是詳解vue動(dòng)態(tài)屬性數(shù)據(jù)綁定，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

v-bind的基本用法

一、本節(jié)說(shuō)明

前面的章節(jié)我們學(xué)習(xí)了如何向頁(yè)面html標(biāo)簽進(jìn)行插值操作，那么如果我們想動(dòng)態(tài)改變html標(biāo)簽的屬性，該怎么辦呢？
這就是我們這節(jié)開(kāi)始要講的內(nèi)容v-bind.

二、 怎么做

• “:”為v-bind的簡(jiǎn)寫(xiě)形式，也可稱(chēng)為語(yǔ)法糖
   

三、 效果

四、 深入

• 在上圖中將a標(biāo)簽的href屬性值設(shè)置為toutiao，VUE實(shí)例將自動(dòng)去data里面尋找toutiao屬性進(jìn)行值綁定。
• 不只是a標(biāo)簽，所有的html標(biāo)簽屬性都可以通過(guò)v-bind進(jìn)行值綁定，然后通過(guò)改變數(shù)據(jù)動(dòng)態(tài)改變它的屬性值。
   

錯(cuò)誤的寫(xiě)法

• 注意一下：初學(xué)者容易犯錯(cuò),這樣寫(xiě)是錯(cuò)誤的，v-bind:href="{{toutiao}}" rel="external nofollow" 。
• 下面的寫(xiě)法也無(wú)法正常的完成屬性值綁定操作,注意雙引號(hào)中間有一對(duì)單引號(hào)。

<a v-bind:href="'toutiao'" rel="external nofollow" >今日頭條(v-bind:href)</a>

加上單引號(hào)之后，并不會(huì)進(jìn)行屬性值綁定，而是將字符串原樣渲染后綁定屬性上。

v-bind綁定calss屬性(對(duì)象語(yǔ)法)

一、本節(jié)說(shuō)明

v-bind綁定元素除了上一節(jié)那種直接進(jìn)行單個(gè)屬性值綁定，還可以傳入對(duì)象和數(shù)組。如：本節(jié)我們講解使用對(duì)象語(yǔ)法的方式對(duì)class屬性進(jìn)行綁定。

• 我們先來(lái)看看，傳統(tǒng)的html的css類(lèi)引用語(yǔ)法

  <h3 class="css類(lèi)名1 css類(lèi)名2">html傳統(tǒng)寫(xiě)法</h3>

   
• v-bind對(duì)象語(yǔ)法，我們需要隊(duì)css-class類(lèi)名賦一個(gè)boolean值，來(lái)決定css類(lèi)是否生效。

  <h3 v-bind:class="{css類(lèi)名1: true|false, css類(lèi)名2: true|false}">{{message}}</h3>

   

初次看這種寫(xiě)法，實(shí)在是繁瑣，沒(méi)有我們直接在html標(biāo)簽上寫(xiě)class更加簡(jiǎn)單。但是v-bind:class語(yǔ)法的好處就在于，我們可以動(dòng)態(tài)的改變布爾值，來(lái)切換樣式。

• 問(wèn)題：我們使用了v-bind:class,那么class屬性還能不能用了？
   答：可以，完全不耽誤，vue會(huì)幫你將二者合并

<h3 v-bind:class="{css類(lèi)名1: true|false, css類(lèi)名2: true|false}" class="css類(lèi)名3">{{message}}</h3>

我們利用上面的語(yǔ)法，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的需求：為文字增加顏色，并點(diǎn)擊按鈕實(shí)現(xiàn)顏色的切換。

二、 怎么做

首先，定義兩個(gè)css的類(lèi)，blue和red是兩個(gè)css的類(lèi)名

.blue {
 color: blue;
}
.red {
 color: red;
}

然后我們來(lái)實(shí)現(xiàn)視圖模型，isBlue=true表示默認(rèn)設(shè)置文字的顏色是藍(lán)色的

有的時(shí)候我們會(huì)覺(jué)得在雙引號(hào)里面去寫(xiě)css類(lèi)有點(diǎn)怪異，并且IDE無(wú)提示。css類(lèi)比較多的情況下，我們也可以把屬性值對(duì)象綁定，通過(guò)自定義函數(shù)來(lái)返回

三、 效果

上面兩種方式，實(shí)現(xiàn)的效果是一樣的，藍(lán)色的文字

四、 深入

那我們?nèi)绾蝿?dòng)態(tài)的切換顏色呢，這就需要我們自定義方法啦

• 視圖代碼，@click是v-on:click的簡(jiǎn)寫(xiě)形式，changeColor是我們自定義的切換顏色的方法

<button @click="changeColor">換顏色</button>

• 視圖模型（app），在methods代碼段加入自定義函數(shù)changeColor

changeColor(){
  this.isBlue = !this.isBlue
  this.isRed = !this.isRed
}

最終效果

v-bind綁定class屬性(數(shù)組語(yǔ)法)

一、本節(jié)說(shuō)明

在上一節(jié)中，我們講了如何使用v-bind對(duì)象語(yǔ)法的方式綁定class屬性，并實(shí)現(xiàn)了樣式的切換。這一節(jié)我們來(lái)學(xué)習(xí)v-bind綁定class屬性的另外一種語(yǔ)法-數(shù)組語(yǔ)法。這種數(shù)組語(yǔ)法在實(shí)際應(yīng)用中并不如對(duì)象語(yǔ)法常見(jiàn)，其用法容易理解，但書(shū)寫(xiě)相對(duì)繁瑣。

• 數(shù)組語(yǔ)法綁定class類(lèi)

<div :class="['css類(lèi)名1','css類(lèi)名2']">數(shù)組語(yǔ)法</div>

• 數(shù)組中嵌套對(duì)象

<div :class="['css類(lèi)名1', 'css類(lèi)名2', {css類(lèi)名3: true|false}]"> 數(shù)組中嵌套對(duì)象</div>

• 注意對(duì)象里面的css類(lèi)名不用加單引號(hào)，和上一節(jié)用法是一致的

二、 怎么做

我們利用數(shù)組語(yǔ)法，實(shí)現(xiàn)一個(gè)和上一節(jié)對(duì)象語(yǔ)法一樣的需求：為文字增加顏色，并點(diǎn)擊按鈕實(shí)現(xiàn)顏色的切換。首先我們定義css類(lèi)

下面是具體的實(shí)現(xiàn)

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

三、 效果

為文字增加顏色，并點(diǎn)擊按鈕實(shí)現(xiàn)顏色的切換（這里是瀏覽器截圖，點(diǎn)擊無(wú)效）

四、 深入：哪些數(shù)組操作是響應(yīng)式的？

在上文中，我們使用數(shù)組的pop()和push()方法去操作數(shù)組元素，而不是使用this.cssArray[1] = 'blue'直接操作數(shù)組。因?yàn)檫@種通過(guò)下標(biāo)操作數(shù)組的方式不是響應(yīng)式的，也就是說(shuō)雖然數(shù)組元素的值會(huì)發(fā)生變化，但不會(huì)導(dǎo)致頁(yè)面顏色發(fā)生切換。

所以，當(dāng)我們希望通過(guò)操作數(shù)據(jù)影響頁(yè)面顯示內(nèi)容及顯示效果的時(shí)候，要使用數(shù)組相關(guān)的函數(shù)，不能直接使用數(shù)組下標(biāo)操作數(shù)據(jù)。下面列舉一下經(jīng)常用到的響應(yīng)式的數(shù)組操作函數(shù)：

• push(param…) 加入元素到數(shù)組的尾部
• pop() 從數(shù)組的尾部彈出一個(gè)元素
• shift() 從數(shù)組的頭部移除一個(gè)元素
• unshift(param…) 加入元素到數(shù)組的頭部
• splice() 可以實(shí)現(xiàn)指定下標(biāo)的數(shù)組元素的刪除、插入、替換
• sort() 數(shù)組排序
• reverse() 數(shù)組倒序排序
   

如果你對(duì)這些方法還不是很熟，有必要去復(fù)習(xí)一下這些js的基礎(chǔ)知識(shí)。

v-bind綁定style屬性

一、本節(jié)說(shuō)明

上一節(jié)我們使用綁定對(duì)象或數(shù)組的語(yǔ)法來(lái)實(shí)現(xiàn)css的class類(lèi)動(dòng)態(tài)樣式切換，這一節(jié)我們學(xué)習(xí)綁定style屬性值實(shí)現(xiàn)動(dòng)態(tài)的樣式。

注意：

• 我們使用v-bind來(lái)綁定class或style屬性的主要目的是實(shí)現(xiàn)：css樣式的動(dòng)態(tài)切換。
• 如果單純的為html標(biāo)簽加樣式，不需要?jiǎng)討B(tài)切換，就不需要使用v-bind綁定。屬于畫(huà)蛇添足，自找麻煩。
   

二、 怎么做

直接在元素上通過(guò) :style 的形式，書(shū)寫(xiě)樣式對(duì)象

<h3 :>這是一個(gè)紅色的H2</h3>

實(shí)現(xiàn)一個(gè)字體大小動(dòng)態(tài)變化的需求

• 動(dòng)態(tài)修改data.fontSize,從而達(dá)到動(dòng)態(tài)改變字號(hào)大小的目的。
• 從上圖中，我們可以看到，可以將css樣式屬性保存在一個(gè)對(duì)象里面，綁定到style屬性上面。
• 抽取其中需要變化的部分，用數(shù)據(jù)模型變量來(lái)替換。從而達(dá)到動(dòng)態(tài)修改樣式的效果
   

三、 效果

四、 深入

style屬性除了可以綁定一個(gè)對(duì)象，還可以使用數(shù)組綁定的語(yǔ)法，引用多個(gè) data 上的樣式對(duì)象。用法如下：

• 在data上定義樣式：

data: {
 style1: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
 style2: { font-style: 'italic' }
}

在元素中，通過(guò)屬性綁定的形式，將樣式對(duì)象組成一個(gè)數(shù)組應(yīng)用到元素中：

<h3 :>這是一個(gè)藍(lán)色的斜體的h3</h3>

看完這篇關(guān)于詳解vue動(dòng)態(tài)屬性數(shù)據(jù)綁定的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話(huà)，可以把它分享出去給更多人看到。