一、初探條件渲染

vue 的條件渲染，仍舊依賴于指令系統，下面逐個介紹：

（1）v-if

<div id="app">  <div v-if="c1">c1</div></div>......var app = new Vue({  el: '#app',  data: {    c1: false  }});

當 c1 為真值的時候，渲染出 v-if 所綁定的元素，否則不渲染出該元素。渲染結果如下：

<div id="app"></div>

（2）v-else

<div id="app">  <div v-if="c1">c1</div>  <div v-else>c1 is not true</div></div>......var app = new Vue({  el: '#app',  data: {    c1: false  }});

當 c1 為真值的時候，渲染 v-if 所綁定的元素，否則渲染 v-else 所綁定的元素。這里值得注意的是，在 Handlebars 模板引擎里面，else 可以和 each 所搭配，當遍歷次數為0的時候，則渲染 else 塊所對應的內容；而對于 vue，官方給出的說法是，每個 v-else 所綁定語句必須綁定在 v-if 或者 v-else-if 語句的后面。一開始我還抱有一絲希望地去試了一下，結果。。。

遍歷次數為0的時候，v-else 綁定的元素沒有渲染出來，而且控制臺還報錯了。

個人感覺，在這一方面，vue 的模板引擎可能有所欠缺。雖然說，我們可以利用在循環中添加條件判斷實現相同的功能，但卻需要添加額外的代碼。

（3）v-else-if

<div id="app">  <div v-if="c1">c1</div>  <div v-else-if="c2">c2</div></div>......var app = new Vue({  el: '#app',  data: {    c1: false,    c2: true  }});

這里先檢查 c1 是否為真值，是則渲染出 v-if 綁定的元素，否則檢查 c2 是否為真值，是則渲染出 v-else-if 所綁定的元素。如果 c1 / c2 都不為真值，則都不渲染。渲染結果如下：

<div id="app">  <div>c2</div></div>

不難理解，v-if、 v-else、 v-else-if 跟類 C 語言中的 if、else、else if 功能相仿。

二、條件渲染優化

除了提供跟類 C 語言中的 if、else、else if 相似的功能以外，vue 還為開發者提供了性能優化方案。

（1）v-show

v-show 有著和 v-if 相似而又不同的功能，v-if 依賴于控制 DOM 節點，而 v-show 是依賴于控制 DOM 節點的 display 屬性。

<div id="app">  <div v-show="c4">c4</div></div>......var app = new Vue({  el: '#app',  data: {    c4: false  }});

當 v-show 綁定的值為真值的時候，節點正常渲染；當為假值的時候，節點仍舊渲染，但是添加了 style="display:none;"，將節點通過 CSS 的方式隱藏。渲染結果如下：

<div id="app">  <div style="display: none;">c4</div></div>

相比于 v-if，v-show 其實不管在什么條件下，一開始都會進行節點的渲染，而后續的狀態切換都是基于 CSS 實現的。針對狀態需要頻繁切換狀態的節點，v-show 相對于直接修改 DOM 節點的 v-if 有更好的性能。

然而，v-show 的缺點也是顯而易見的，不管初始條件如何，它都將進行 DOM 節點的渲染，這對首屏加載優化不一定是個好事情。

（2）key

在使用 v-if 等指令的時候，vue 會盡可能地復用已經渲染的元素，而不是全部地重頭渲染。例如一對綁定 v-if 與 v-else 的元素，如果二者內部 DOM 元素相同，則可能在所綁定數據改變時，只更新綁定了的屬性，其它通過用戶操作或者 JS 修改了的屬性將被保留。

<div id="app">  <form>    <div class="input-group" v-if="name">      <label for="name">name:</label>      <input type="text" name="name" placeholder="user name" />    </div>    <div class="input-group" v-else>      <label for="email">email:</label>      <input type="text" name="email" placeholder="email" />    </div>    <button v-on:click.prevent="toggle">toggle</button>  </form></div>......var app = new Vue({  el: '#app',  data: {    name: true  },  methods: {    toggle: function () {      this.name = ! this.name;    }  }});

這里就是如此，點擊 toggle 按鈕的時候，v-if 所綁定的值會切換，相應的，DOM 節點也會跟著切換，但是實際上，由于 vue 重用了 input 元素，切換的同時，用戶填寫的內容并沒有被清空。同理，label 元素在切換的工程中，其實也只是修改了 for 屬性和元素內的文字，并沒有銷毀原有 DOM 節點和生成新的 DOM節點。

但是 vue 做的這種優化并不總是為人們所需要的，不需要它的時候，我們為這個元素添加一個唯一的 key 值就可以了。

<div id="app">  <form>    <div class="input-group" v-if="name">      <label for="name">name:</label>      <input type="text" name="name" placeholder="user name" key="name" />    </div>    <div class="input-group" v-else>      <label for="email">email:</label>      <input type="text" name="email" placeholder="email" key="email" />    </div>    <button v-on:click.prevent="toggle">toggle</button>  </form></div>......var app = new Vue({  el: '#app',  data: {    name: true  },  methods: {    toggle: function () {      this.name = ! this.name;    }  }});

像這樣，為這兩個不需要“優化”的 input 元素添加了唯一標識的 key 以后，vue 便不會再復用這兩個元素。每次切換之后，修改的內容將不會被保留。

三、更多思考

（1）基于標簽的指令（v-bind 、v-if）

Handlebars 的 helpers 有自己獨立的語法，比如：

{{#if ok}} <h1>Yes</h1>{{/if}}

它定義了一組自己的語法。而實現同樣的功能，vue 使用類似于 v-bind、v-if 之類的指令，它們都是綁定在一個個標簽上面的，如

<h1 v-if="ok">Yes</h1>

這樣的語法更加簡潔、清晰。

Handlebars 的語法，支持同時綁定多個 DOM 節點。

{{#if ok}} <h1>Yes</h1> <h1>Yes</h1> <h1>Yes</h1>{{/if}}

按照前面的思路，難道 vue 要實現成這樣？

<h1 v-if="ok">Yes</h1><h1 v-if="ok">Yes</h1><h1 v-if="ok">Yes</h1>

那根本不可能，添加額外的 DOM 節點包裹住它們？那就更不可能。vue 擴展了一個 template 節點，使用的時候，我們可以像 HTML 節點一樣去使用它，但是渲染頁面的時候，它不會被渲染在頁面上。于是，前面的代碼可以實現成這樣：

<template v-if="ok"> <h1>Yes</h1> <h1>Yes</h1> <h1>Yes</h1></template>

想想，其實和 Handlebars 也差不多了，甚至顯得還要復雜些了，畢竟 template 這個單詞這么長~

（2）利用條件渲染字符串

前面說，v-if 等指令都是基于標簽的，那如果我不想創建額外的標簽，只是想按照條件去修改一個字符串呢？沒錯，你猜對了，template 節點，它里面除了可以存放節點，也可以直接存放字符串，就像這樣：

<div id="app">  <template v-if="c3">text</template></div>......var app = new Vue({  el: '#app',  data: {    c3: true  }});

渲染結果：

<div id="app">text</div>

這里其實也就是利用了 template 節點不會被渲染在頁面上的特性。

（3）屬性的“條件渲染”

既然 HTML 節點可以條件渲染，多個 HTML 節點可以條件渲染，HTML 節點內字符串可以條件渲染，那么 HTML 屬性呢？在編寫模板的時候，HTML 屬性其實也是字符串，我們能想上面那樣，利用 template 模板創建字符串作為 HTML 的屬性嗎？

是不是一看就感覺怪怪的？vue 也這樣覺得，于是控制臺里就解析成了：

中間的 <template v-if='c3'>title content</template> 整個的被識別成了字符串，那如果去掉外面的雙引號呢？

好像看起來更奇怪了。最后的渲染結果：

<div title="<template">title content>此處應有 title</div>

vue 的模板解析不是簡單的依賴于字符串的解析，所以其實這里不能使用這種方法。正確的姿勢是利用 v-bind 指令：

<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因為 v-bind 指令的預期值實際上可以接受 js 表達式的，這里我們傳入了一個條件表達式。當 c3 為真值的時候，渲染為 title="title content"，當 c3 為假值的時候，渲染為 title=""。