条件渲染
v-if
在使用 v-if
控制元素的时候,我们需要将它添加到这个元素上去。然而如果要切换很多元素的时候,一个个的添加就太麻烦了。这时候就可以使用 <template>
将一组元素进行包裹,并在上面使用 v-if。最终的渲染结果不会包含 <template>
元素。
<div id="app">
<!-- ok为true显示 为false则不显示 -->
<template v-if="ok">
<h3>Title</h3>
<p>Paragraph 1</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
v-else
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
<div id="app">
<!-- 如果ok为true 第一个div显示 第二个隐藏 -->
<!-- 如果ok为false 第一个div隐藏 第二个显示 -->
<div v-if="ok">Hello...</div>
<div v-else>World...</div>
<div v-if="num == 10">num = {{num}}</div>
<div v-else>num != 10</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: false,
num: 10
}
})
</script>
v-else-if
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
<div id="app">
<!-- 返回条件成立的内容 并退出判断 -->
<div v-if="num > 10">num = {{num}}</div>
<div v-else-if="num > 5">num > 5</div>
<div v-else-if="num < 5">num < 5</div>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 11
}
})
</script>
用 key 管理可复用的元素
以下说明示例中的2个两个模板使用了相同的元素,如果我们不想让他们重复使用,只需添加一个具有唯一值的 key 属性即可
<div id="app">
<template v-if="loginType === 'username'">
<label>UserName </label>
<input type="text" placeholder="Enter your username">
</template>
<template v-else>
<label>Email </label>
<input type="text" placeholder="Enter your email address">
</template>
<input v-on:click="btn" type="button" value="切换">
</div>
<script>
new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
btn: function(){
if(this.loginType === "username"){
this.loginType = "email"
}else{
this.loginType = 'username'
}
}
}
})
</script>
那么在上面的代码中切换 loginType
将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input>
不会被替换掉——仅仅是替换了它的 placeholder
。
Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
现在,每次切换时,输入框都将被重新渲染
<div id="app">
<template v-if="loginType === 'username'">
<label>UserName </label>
<input key="username-input" placeholder="Enter your username">
</template>
<template v-else>
<label>Email </label>
<input key="email-input" placeholder="Enter your email address">
</template>
<input v-on:click="btn" type="button" value="切换">
</div>
<script>
new Vue({
el: '#app',
data: {
loginType: 'username'
},
methods: {
btn: function(){
if(this.loginType === "username"){
this.loginType = "email"
}else{
this.loginType = 'username'
}
}
}
})
</script>