条件渲染
v-if
<h1 v-if="ok">Yes</h1>
也可以用 v-else 添加一个 “else” 块:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
在<template>中配合v-if 渲染一整组
因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else v-else-if
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。v-else-if,顾名思义,充当 v-if 的“else-if 块”。可以链式地使用多次:
<h1 v-if="grade>=60">及格</h1>
<h1 v-else-if="grade>=90">优秀</h1>
<h1 v-else>不及格</h1>
var vm=new Vue({
data:{
grade:60
}
});
类似于 v-else,v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。
用key管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
var vm=new Vue({
el:"#app",
data:{
loginType:'email'
},
methods:{
qiehuan:function(){
if(this.loginType=="email"){
this.loginType=="username"
}else{
this.loginType=="email"
}
}
}
});
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
注意,<label> 元素仍然会被高效地复用,因为它们没有添加 key 属性。
v-show
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
<h1 v-show="ok">Hello!</h1>
注意, v-show 不支持 <template> 语法,也不支持 v-else。
v-if vs v-show
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
v-if与v-for一起用
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
<ul>
<li v-for="item in items" v-if="item.isOk">{{item.text}}</li>
</ul>
var vm=new Vue({
data:{
items:[
{text:"chifan",isOk:true},
{text:"shuijue",isOk:false},
{text:"kandianshi",isOk:true},
{text:"dayouxi",isOk:true},
{text:"kandianying",isOk:false},
]
}
});
如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>)上。