条件渲染指令
2018-10-19 本文已影响18人
一叶扁舟丶
v-if, v-else-if, v-else
与 JavaScript 的条件语句 if, else, else if 类似,Vue.js 的条件指令可以根据表达式的值在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,表达式的值为真时,当前元素/组件及所有子节点将被渲染, 未假时被移除. 如果一次判断的是多个元素, 可以在 Vue.js 内置的 <template>元素上使用条件指令,最终渲染的结果不会包含该元素,例如:
<!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 在渲染元素时,由于效率考虑,会尽可能地复用已有的元素而非常新渲染,比如下面的示例:
<!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 属性,他可以让你自己决定是否要复用元素, 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 后, 就不回复用了,切换类型时键入的内容也会被删除,不过<label> 元素仍然是被复用的,因为没有添加 key 属性.
