## 条件渲染 ### v-if 和 v-else ~~~ <h1 v-if="ok">Yes</h1> ~~~ ~~~ <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> ~~~ v-if 控制dom是否存在 v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 ### 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-if 2.1.0 新增 ~~~ <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-show ~~~ <h1 v-show="ok">Hello!</h1> ~~~ 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 注意，v-show 不支持 template 元素，也不支持 v-else ### 课后习题 1.v-show和v-if的区别是什么？ 2.下面的代码有什么问题？ ~~~ // 模版部分 <div v-if="test">AAA</div> <span>BBB</span> <div v-else>CCC</div> // vue实例中data部分 data:{ test: true } ~~~