<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <div id="if"> <h1 v-if="ok">h1</h1> <h1 v-else>h2</h1> <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> <!--v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别--> <br> <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> <!--v-else-if 必须跟在 v-if 或者 v-else-if之后--> <!--Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。<input> 会被复用，仅仅是替换了他们的 placeholder。--> <!--这样也不总是符合实际需求，所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性 key ，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 属性。--> <h1 v-show="ok">Hello h1!</h1> <!--注意: v-show 不支持 <template> 语法--> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#if", data: { ok:true, type:'D', loginType:'username2' } }) </script> </body> </html>
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。