## 條件渲染 ### 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 } ~~~