淺入深出Vue：數據綁定

上一篇咱們使用了簡單的數據渲染，那麼若是說咱們想要動態渲染標籤的 class 能夠這麼操做麼？

爲何綁定

簡單的數據渲染，包括表達式、函數在內。其實都只是在標籤中渲染，若是遇到如下狀況怎麼辦呢：

• 須要在標籤內部進行某種 "騷操做" 。

• 須要控制流來控制不一樣數據下的不一樣渲染效果。

• 須要渲染一個數組。

這時候簡單渲染就不能很好的解決問題了，怎麼辦 ？

來一發數據綁定吧！

綁定是什麼

在瞭解綁定是什麼以前，先了解一下什麼是指令：

在 " vue" 中，指令是帶有 v- 前綴的特殊屬性，用來修飾標籤的（自定義組件在這裏也統一歸爲標籤，由於其使用方式和原生標籤同樣），其值的約束和模板語法同樣，支持表達式、變量。

• 指令會監測其值的變化，並將其的變化反應給所處的DOM

咱們來看一下上一章最後的例子：

<h1>{{ if(msg == '1') return time }}</h1>

在這裏咱們是想利用控制流來控制是否顯示時間，可是很遺憾，模板語法並不支持js語法。

可是 " vue" 中有這樣一個指令來彌補模板語法不支持 js語法的遺憾：

v-if

下面看看修改後的代碼：

<h1 v-if="msg=='1'">{{ formatTime(time) }}</h1>

先將 msg的值賦值爲1：

而後再修改一下 msg的值看看：

什麼也沒有顯示，由於咱們 msg的值並非 1。

v-if 指令很完美的解決了咱們最開始提出來的第二個問題：

• 須要控制流來控制不一樣數據下的不一樣渲染效果。

讓咱們回到最開始的話題。

這就是指令，而在官方原生的指令中，有一個指令是專門用來綁定標籤屬性的：

v-bind

命名很形象，bind 直譯就是綁定的意思。

如何綁定

這裏利用 div標籤展現一下 v-bind 的使用方式，用在其它標籤上同理：

<div v-bind:屬性名="表達式"></div>

咱們拿第一個問題舉例實踐一下：

• 須要在標籤內部進行某種 "騷操做"。

這裏咱們就根據 isDark的值來肯定時間顯示的背景色吧

• 當 isDark爲 true 的時候，背景色變成黑色，文字變成白色。

• 當 isDark爲 false的時候，背景色變成白色，文字變成黑色。

先來定義 isDark:

data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: False
    }
  }

而後添加一下兩種條件下的樣式：

<style>
  .dark{
    background-color: black;
    color: white;
  }

  .light{
    background-color: white;
    color: black;
  }
</style>

接下來給 h1標籤加上綁定指令：

<h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>

效果以下：

咱們將 isDark 的值修改爲 true：

很完美的達到了所需求的效果。

這就是指令的魅力。

最後一個問題

上述兩個指令解決了咱們最初提出來三個問題中的兩個，那麼剩下一個呢？

• 須要渲染一個數組。

當咱們須要渲染表格的時候就會遇到這個場景，如何去渲染一個數組呢？模板語法又並不支持這麼複雜的操做。

請出本章最後一個指令：

v-for

嗯，仍是很形象。js裏面也有 for 嘛~

先看看它是作什麼的：

• v-for 會爲數據源（綁定的列表）中的每一項，生成一個同類的標籤。

而後看看怎麼用，這裏用 a 標籤作說明，其餘標籤相似：

<!-- 寫法1 -->

<a v-for="別名 in 數據源" v-bind:key="惟一標識">{{ 別名.字段 }}</a>

<!-- 寫法2 -->

<a v-for="(下標, 別名) in 數據源" v-bind:key="惟一標識">{{ 別名.字段 }}</a>

由於新版本的 vue要求使用 v-for指令渲染的標籤必須綁定一個key用作惟一標識，大多數狀況下咱們能夠直接使用下標來進行標識

繼續使用咱們以前的代碼進行演示，先定義一個 url的數組：

data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: true,
      urlList: [
        {
          text: '連接1',
          url: '#1'
        },

        {
          text: '連接2',
          url: '#2'
        },

        {
          text: '連接3',
          url: '#3'
        }
      ]
    }
  }

而後渲染安排一波：

<a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

效果以下：

渲染的結果是三個 a 標籤，很是正確~

很完美的解決了最後一個問題。

還有些什麼指令呢？

官方還有其餘的指令，這裏再提一個：

v-on

v-on 指令能夠綁定事件，好比說按鈕的點擊事件。

像上面切換背景的例子中，能夠經過一個按鈕的點擊事件來修改 isDark的值，從而控制背景的改變。就不須要每次都手動來修改下 isDark的值了。

這個實踐就留給好奇心止不住的你來吧~