### v-if 可以搭配v-else ``` <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> ``` #### 在<template>上使用v-if条件渲染分组 v-if 如何切换多个元素呢？ <template>当做不可见的包裹元素，最终渲染不包括： ``` <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> ``` #### v-else ``` <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> ``` v-else元素必须紧跟在v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 #### v-else-if 2.1.0 新增，充当 v-if的 else-if块， 可以连续使用 ``` <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-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 #### 用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> ``` 不过不加key, 切换时输入框不会重新渲染/ ### v-show 根据条件展示元素 ``` <h1 v-show="ok">Hello!</h1> ``` 带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单切换元素的CSS属性display。 注意，v-show 不支持 <template> 元素，也不支持 v-else。 #### v-show vs v-if v-if 真正的条件渲染，切换过程中条件内的事件监听器和子组件适当第被销毁和重建。一般来说： v-if有更高的切换开销，v-show有更高的初始渲染开销。如果要非常频繁地切换，使用v-show较好，如果运行条件很少改变，则使用v-if。 ### v-if 与 v-for 不推荐一起使用 同时使用时，v-for 具有比v-if更高的优先级