vue條件渲染
一、v-if
v-if指令用於條件的渲染一塊內容，當指令的表達式返回true時，內容才會被渲染
如果想切換多個元素，可以使用<template>元素當作不可見的包裹元素。並在上面使用v-if，最終的渲染結果不包含<template>元素。
二、v-else、v-else-if
使用 v-else 指令來表示 v-if 的“else 塊”：v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if的元素之后。
三、用key管理可復用的元素
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。當你使用v-if的內容中有復用的，也有不應該復用的元素，可以需添加一個具有唯一值的 key 屬性，這樣就不會再復用該元素，這兩個元素是相互獨立。
四、v-show
用於根據條件展示元素的選項是 v-show 指令，帶有v-show的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display，
當返回值為true，那么元素的display：true。（注意，v-show 不支持 <template> 元素，也不支持 v-else。）
五、v-if和v-show的區別（vue小白面試常問問題）
相同點：兩者都可以控制一個元素的顯示與否。
不同點：
1. 控制顯示的方法不同：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱；
2.編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做，不會去渲染該元素；只有在條件第一次變為真時才開始局部編譯; v-show是在不管初始條件是什么，都被編譯，然后被緩存，而且DOM元素保留，只是簡單的基於css進行切換；即v-if中當為true才會被加載渲染，為false不加載。v-show不管為true或flase，都會加載渲染
v-show 較好；如果在運行時條件很少改變，當只需要一次顯示或隱藏，則使用
v-if 較好。