一塊兒學Vue之條件判斷

在Vue進行前端開發中，條件判斷主要用於根據不一樣的條件來決定顯示或隱藏，或者進行視圖之間的切換，本文以一個簡單的小例子簡述v-if的常見用法，僅供學習分享使用，若有不足之處，還請指正。

v-if 指令

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。 能夠用 v-else 添加一個「else 塊」,也能夠不用。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

以下所示：若是isgood爲true，則顯示【Vue is good!】不然顯示【Oh no】。

1 <h3 v-if="isgood">Vue is good!</h3>
2 <h3 v-else>Oh no 😢</h3>

在 <template> 元素上使用 v-if 條件渲染分組

由於 v-if 是一個指令，因此必須將它添加到一個元素上。可是若是想切換多個元素呢？此時能夠把一個 <template> 元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。以下所示：

1 <template v-if="isgood">
2     <h1>Title</h1>
3     <p>Paragraph 1</p>
4     <p>Paragraph 2</p>
5 </template>

v-else-if 指令

v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用，以下所示：

1 <div v-if="type === 'A'">A</div>
2 <div v-else-if="type === 'B'">B</div>
3 <div v-else-if="type === 'C'">C</div>
4 <div v-else>Not A/B/C</div>

相似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素以後。

用 key 管理可複用的元素

Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作除了使 Vue 變得很是快以外，還有其它一些好處。例如，若是你容許用戶在不一樣的登陸方式之間切換：

1 <template v-if="loginType === 'username'">
2     <label>Username</label>
3     <input placeholder="Enter your username">
4 </template>
5 <template v-else>
6     <label>Email</label>
7     <input placeholder="Enter your email address">
8 </template>

那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。由於兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。這樣也不老是符合實際需求，因此 Vue 爲你提供了一種方式來表達「這兩個元素是徹底獨立的，不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

1 <template v-if="loginType === 'username'">
2     <label>Username</label>
3         <input placeholder="Enter your username" key="username-input">
4 </template>
5 <template v-else>
6     <label>Email</label>
7     <input placeholder="Enter your email address" key="email-input">
8 </template>    

如今，每次切換時，輸入框都將被從新渲染。注意，<label> 元素仍然會被高效地複用，由於它們沒有添加 key 屬性。

v-show 指令

另外一個用於根據條件展現元素的選項是 v-show 指令。用法大體同樣，以下所示：

1 <h3 v-show="isgood">Hello!</h3>

不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
注意：v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作，直到條件第一次變爲真時，纔會開始渲染條件塊。相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

v-if 與 v-for 一塊兒使用

不推薦同時使用 v-if 和 v-for，當 v-if 與 v-for 一塊兒使用且處於同一節點時，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。當你只想爲部分項渲染節點時，這種優先級的機制會十分有用，以下：

1 <ul>
2     <li v-for="todo in todos" v-if="!todo.isComplete">
3         {{ todo.name }}
4     </li>
5 </ul>

上面的代碼將只渲染未完成的 todo。

而若是你的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 <template>)上。如：

1 <ul v-if="todos.length">
2     <li v-for="todo in todos">
3         {{ todo.name }}
4     </li>
5 </ul>
6 <p v-else>No todos left!</p>

示例中用到的腳本以下所示：

 1 <script type="text/javascript">
 2     var app=new Vue({
 3         el:'#app',
 4         data:{
 5             msg:'hello world!!!',
 6             isgood:true,
 7             type:'B',
 8             loginType:'username',
 9             todos:[
10                 {isComplete:true,name:'hello world'},
11                 {isComplete:false,name:'hello vue'}
12             ]
13                     
14         }
15                 
16     });
17 </script>    

備註

書山有路勤爲徑，學海無涯苦做舟。