使用方法
v-if :
<h1 v-if="xkd">俠課島</h1>
template 中配合 v-if 條件渲染一整組 :
<template v-if="a">
<h1>Title</h1>
<p>Paragraph one</p>
<p>Paragraph two</p>
</template>
使用v-else 指令來表示 v-if 的 else,v-else 元素必須緊跟在 v-if 或者 v-else-if元素的後面,否則它將不會被識別 :
<h1 v-if="a">True</h1>
<h1 v-else>FALSE</h1>
多次使用 v-if :
<h1 v-if="color == 'red'" style="color: red;">紅</h1>
<h1 v-else-if="color == 'green'" style="color: green;">綠</h1>
<h1 v-else="color == 'blue'" style="color: blue;">藍 </h1>
如圖所示:
key 管理可複用的元素
通常會複用已有元素而不是從頭開始渲染(就近原則),key使得Vue渲染速度會變得非常快。
下面是key的使用方法:
<body>
<div id="main">
<template v-if="loginType === 'username'">
<label>用戶名</label>
<input placeholder="請輸入用戶名" key="username-input" />
</template>
<template v-else>
<label>郵箱</label>
<input placeholder="請輸入郵箱" key="email-input" />
</template>
<input type="button" value="切換" v-on:click="changeType" />
</div>
</body>
<script>
var vm = new Vue({
el: '#main',
data: {
'loginType': 'username'
},
methods: {
changeType: function() {
if (this.loginType == 'username') {
this.loginType = 'email';
} else {
this.loginType = 'username';
}
}
}
})
</script>
v-show vs v-if
v-show:
<h1 v-show="xkd">Hello!</h1>
v-show:比較簡單,不管初始條件是什麼,元素總是會被渲染,並且只是簡單的基於CSS進行變換。初始渲染開銷較大。
v-if:有更高的切換開銷。
如果需要非常頻繁的切換,那麼使用v-show比較好;如果在運行條件不太可能改變的情況下,則使用v-if較好。