上一篇我們使用了簡單的數據渲染，那么如果說我們想要動態渲染標簽的 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的值了。
這個實踐就留給好奇心止不住的你來吧~