v-bind的基本用法

一、本節說明

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

二、 怎麼做

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

三、 效果

四、 深入

• 在上圖中將a標籤的href屬性值設定為toutiao，VUE例項將自動去data裡面尋找toutiao屬性進行值繫結。
• 不只是a標籤，所有的html標籤屬性都可以通過v-bind進行值繫結，然後通過改變資料動態改變它的屬性值。
  

錯誤的寫法

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

<a v-bind:href="'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類名1: true|false,css類名2: true|false}" 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 動態屬性資料繫結的資料請關注我們其它相關文章！