v-bind的基本用法

一、本節(jié)說明

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

二、 怎么做

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

三、 效果

四、 深入

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

錯誤的寫法

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

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

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

v-bind綁定calss屬性(對象語法)

一、本節(jié)說明

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

• 我們先來看看，傳統(tǒng)的html的css類引用語法

  <h2 class="css類名1 css類名2">html傳統(tǒng)寫法</h2>

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

  <h2 v-bind:class="{css類名1: true|false, css類名2: true|false}">{{message}}</h2>

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

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

<h2 v-bind:class="{css類名1: true|false, css類名2: true|false}" class="css類名3">{{message}}</h2>

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

二、 怎么做

首先，定義兩個css的類，blue和red是兩個css的類名

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

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

有的時候我們會覺得在雙引號里面去寫css類有點(diǎn)怪異，并且IDE無提示。css類比較多的情況下，我們也可以把屬性值對象綁定，通過自定義函數(shù)來返回

三、 效果

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

四、 深入

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

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

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

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

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

最終效果

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

一、本節(jié)說明

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

• 數(shù)組語法綁定class類

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

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

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

• 注意對象里面的css類名不用加單引號，和上一節(jié)用法是一致的

二、 怎么做

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

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

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

三、 效果

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

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

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

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

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

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

v-bind綁定style屬性

一、本節(jié)說明

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

注意：

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

二、 怎么做

直接在元素上通過 :style 的形式，書寫樣式對象

<h2 :style="{color: 'red', 'font-size': '40px'}">這是一個紅色的H2</h2>

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

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

三、 效果

四、 深入

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

• 在data上定義樣式：

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

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

<h2 :style="[style1, style2]">這是一個藍(lán)色的斜體的h2</h2>

以上就是一文讀懂vue動態(tài)屬性數(shù)據(jù)綁定（v-bind指令）的詳細(xì)內(nèi)容，更多關(guān)于vue 動態(tài)屬性數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論