Vue.js — 条件渲染
1.条件渲染
1.1 v-if、v-else-if、v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.base {
color: 'blue';
font-size: 30px;
}
.override {
color: ''
}
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">Vue is awesome!</p>
<p v-else>Oh no 😢</p>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
seen: true,
ok: false,
type: ''
}
});
</script>
</body>
</html>
1.2 key
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<template v-if="loginType=='username'">
<label>用户名：</label>
<input placeholder="输入用户名" key="username" />
</template>
<template v-else>
<label>邮箱：</label>
<input placeholder="输入邮箱地址" key="email" />
</template>
<button @click="toggleLogin">切换登录方式</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
toggleLogin: function(){
this.loginType = this.loginType ? '' : 'username'
}
}
});
</script>
</body>
</html>
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
在点击"切换登录方式"按钮时，<label>元素会被复用，<input>元素由于添加了key属性而不会被复用。
1.3 v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-show="ok">Hello!</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
ok: true
}
});
</script>
</body>
</html>
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
参考：
