詳解vue動態屬性數據綁定

小編這次要給大家分享的是詳解vue動態屬性數據綁定，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

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類引用語法

  <h3 class="css類名1 css類名2">html傳統寫法</h3>

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

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

   

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

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

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

我們利用上面的語法，實現一個簡單的需求：為文字增加顏色，并點擊按鈕實現顏色的切換。

二、 怎么做

首先，定義兩個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 的形式，書寫樣式對象

<h3 :>這是一個紅色的H2</h3>

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

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

三、 效果

四、 深入

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

• 在data上定義樣式：

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

在元素中，通過屬性綁定的形式，將樣式對象組成一個數組應用到元素中：

<h3 :>這是一個藍色的斜體的h3</h3>

看完這篇關于詳解vue動態屬性數據綁定的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。