官網資料
全部練習範例檔案
V-if & V-show
用途：條件性地渲染內容。這塊內容只會在指令的表達式返回truthy值的時候被渲染。
練習連結
1
2
3
4
5
6
7
8
9
10
11
12
| <h1 v-if="cond1">Yes</h1>
<h1 v-else>No</h1>
<hr>
<h1 v-show="cond1">Yes</h1>
var vm = new Vue({
el: '#app',
data: {
cond1: true
}
});
|
V-if、V-else切換
1
2
| <div class="alert alert-success" v-if="isSuccess">成功!</div>
<div class="alert alert-danger" v-else>失敗!</div>
|
備註：V-else元素必須緊跟在帶v-if或者v-else-if的元素的後面，否則它將不會被識別。
在Template元素上使用v-if條件渲染分組
用途：同時綁定多個元素，維護程式碼整潔，且template不會渲染在畫面上。template 無法與 v-show 共⽤用
1
2
3
4
5
6
7
8
9
10
| <template v-if="showTemplate">
<tr>
<td>1</td>
<td>安妮</td>
</tr>
<tr>
<td>2</td>
<td>小明</td>
</tr>
</template>
|
v-else-if切換分頁
1
2
3
4
5
6
7
8
9
10
11
12
| <p>使用 v-else-if 做出分頁頁籤</p>
<a class="nav-link" href="#" @click.prevent="link='a'">標題一</a>
<a class="nav-link" href="#" @click.prevent="link='b'">標題二</a>
<a class="nav-link" href="#" @click.prevent="link='c'">標題三</a>
<div class="content">
<div v-if="link === 'a'">Ａ</div>
<div v-else-if="link === 'b'">Ｂ</div>
<div v-else-if="link === 'c'">Ｃ</div>
</div>
|
用key管理可複用的元素
Vue渲染網頁時候，並不會從頭開始渲染而是會複用相同元素，使得載入速度加快。而這時候如果我們想要重新渲染就需要用key屬性來添加唯一值
1
2
3
4
5
6
7
8
| <template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="1">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="2">
</template>
|
備註：key可以自行命名
V-if & V-show差異：
1
2
3
4
5
| <div class="alert alert-success" v-show="isSuccess">成功!
</div>
<div class="alert alert-danger" v-show="!isSuccess">失敗!</div>
|
說明：
v-if 與 v-show 最大的差別在是否對 DOM 操作，v-if 會依照條件決定是否將元件渲染⾄至網⾴頁上。
V-show一定會渲染出物件，但是以CSS方式切換顯示與否（display:none），所以當頻繁切換是否顯示時當然使用V-show效能較好。
小結論
結論：
V-if：操控dom元素
V-show：操控display:none