v-if
<h1 v-if="ok">Yes</h1>
切换多个元素://最终的渲染结果不会包含 <template>
元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
//v-else,v-else-if
元素必须紧跟在 v-if
或者 v-else-if
元素的后面——否则它将不会被识别
<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else>Not A/B</div>
在v-if,v-else下的元素,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
<h1 v-show="ok">Hello!</h1> v-show 不支持 <template>,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件不太可能改变,则使用v-if
较好。