v-if, v-else-if, v-else
與 JavaScript 的條件語句 if, else, else if 類似,Vue.js 的條件指令可以根據(jù)表達式的值在DOM中渲染或銷毀元素/組件,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<p v-if="status === 1">當 status 為1時顯示該行</p>
<p v-else-if="status === 2">當 status 為2時顯示該行</p>
<p v-else>否則顯示該行</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
})
</script>
</body>
</html>
v-else-if 要緊跟 v-if, v-else 要緊跟v-else-if 或 v-if,表達式的值為真時,當前元素/組件及所有子節(jié)點將被渲染, 未假時被移除. 如果一次判斷的是多個元素, 可以在 Vue.js 內(nèi)置的 <template>元素上使用條件指令,最終渲染的結(jié)果不會包含該元素,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<temolate v-if="status === 1">
<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>
</temolate>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
});
</script>
</body>
</html>
Vue 在渲染元素時,由于效率考慮,會盡可能地復(fù)用已有的元素而非常新渲染,比如下面的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<template v-if="type === 'name'">
<label>用戶名:</label>
<input placeholder="輸入用戶名">
</template>
<template v-else>
<label>郵箱:</label>
<input placeholder="輸入郵箱">
</template>
<button @click="handleToggleClick">切換輸入類型</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
handleToggleClick: function () {
this.type = this.type === 'name' ? 'mail' : 'name';
}
}
});
</script>
</body>
</html>
如果你不希望這樣做,可以使用 Vue.js 提供的屬性 key 屬性,他可以讓你自己決定是否要復(fù)用元素, key 的值必須是唯一的,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
<template v-if="type === 'name'">
<label>用戶名:</label>
<input placeholder="輸入用戶名" key="name-input">
</template>
<template v-else>
<label>郵箱:</label>
<input placeholder="輸入郵箱" key="name-input">
</template>
<button @click="handleToggleClick">切換輸入類型</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
handleToggleClick: function () {
this.type = this.type === 'name' ? 'mail' : 'name';
}
}
});
</script>
</body>
</html>
給兩個<input>元素都增加 key 后, 就不回復(fù)用了,切換類型時鍵入的內(nèi)容也會被刪除,不過<label> 元素仍然是被復(fù)用的,因為沒有添加 key 屬性.
