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