（二十）v-if

①標準v-if用法

簡單來說，該值為true則顯示該標籤，為false則不顯示；

如例：

[javascript] view plain copy

1. <div id="app">  
2.     <div v-if="abc">{{abc.a}}</div>  
3. </div>  
4. <script>  
5.     var vm = new Vue({  
6.         el: '#app',  
7.         data: {  
8.             abc: {  
9.                 a: "1"
10.             }  
11.         }  
12.     })<pre name="code"class="javascript">  

</script>

當abc這個物件存在時，顯示這一行資料，其內容為abc.a的值；

假如abc這個物件不存在，那麼則不顯示；

也可以用另外一個變數來控制其是否顯示（能否顯示決定於該值隱式轉換為boolean型別時是true還是false）；

例如假如上面有abc這個物件，但這個物件是空物件（沒有屬性a），但空物件隱式轉換後為true，因此會有div，但這個div裡沒有內容；

②template v-if 包裝以同時影響多個html標籤；

即假如多個標籤（且他們是連續的），被一個變數控制是否顯示，那麼每個都這麼寫顯然太繁瑣，因此用一個template標籤將這些標籤包裹起來，用v-if標籤控制該template標籤是否顯示，實際渲染時，template標籤不會顯示，只會顯示其內的標籤；

如示例：

[javascript] view plain copy

1. <div id="app">  
2.     <template v-if="abc">  
3.         <div>{{abc[0]}}</div>  
4.         <div>{{abc[1]}}</div>  
5.         <div>{{abc[2]}}</div>  
6.     </template>  
7. </div>  
8. <script>  
9.     var vm = new Vue({  
10.         el: '#app',  
11.         data: {  
12.             abc: [1, 2, 3]  
13.         }  
14.     })  
15. </script>  

由於非空陣列是值為true，空陣列的值為false，因此方便控制；

另外，這裡只是演示，事實上更好的寫法的v-for來控制內部三個標籤來同時顯示（當然，如果不需要顯示全部的則不應該這麼寫）；

顯示內容：

<divid="app">

    <div>1</div>

    <div>2</div>

    <div>3</div>

</div>

③v-show     用於控制該標籤的display樣式

他的特點是，dom存在於頁面內，已經渲染、事件繫結完畢，區別只是是否顯示。

例如：

[javascript] view plain copy

1. <div v-show="a">{{test}}</div>  

a的值為true，則正常顯示；

a的值為false，則自動新增display:none

v-show不支援template寫法（即不能同時控制多個同級連續div）；

④v-else v-if和v-show的補充語句；

即v-if和v-show的判斷為true時，不顯示v-else標籤的內容；否則顯示v-else標籤的內容。

例如：

[javascript] view plain copy

1. <div id="app">  
2.     <div v-show="a">{{test}}</div>  
3.     <div v-else>def</div>  
4. </div>  
5. <script>  
6.     var vm = new Vue({  
7.         el: '#app',  
8.         data: {  
9.             a: true,  
10.             test: "abc"
11.         }  
12.     })  
13. </script>  

顯示abc；

若把data中的a改為false，則顯示def；

另外，標籤之間需要連續，如以下，v-else則不能正常生效：

[javascript] view plain copy

1. <div v-show="a">{{test}}</div>  
2. <div>another</div>  
3. <div v-else>def</div>  

另外，不要在元件的情況下使用v-else，而是採用v-show=”!變數名”來變相起到v-else的效果

⑤v-if和v-show的比較

v-if	v-show
渲染時間	第一次為真時	剛開始就渲染
切換形式	動態生成，區域性編譯/解除安裝	控制display屬性
生成消耗	較小（只生成為真的部分）	較大（生成全部）
切換消耗	較大（切換時需要區域性編譯）	較小（因為生成時已經渲染完成）

v-if是在第一次條件為真時，進行渲染（比如他下面還有其他元件）；

v-show因為只是控制display的屬性，因此開始就會渲染；

（二十一）v-for列表渲染

①標準寫法

[javascript] view plain copy

1. <li v-for="i in items">{{i}}</li>  

【1】items是一個物件或者陣列；

【2】該格式相當於for(var i in items){//略}

【3】插值的i相當於items[i]

【4】該li會被複制多個，然後依次被items[i]渲染，直到渲染完畢；

示例：

1. <divid="app">
2.     <ul>
3.         <liv-for="i in items">{{i}}</li>
4.     </ul>
5. </div>
6. <script>
7.     var vm = new Vue({  
8.         el: '#app',  
9.         data: {  
10.             items: {  
11.                 a: "1",  
12.                 b: "2",  
13.                 c: "3"  
14.             }  
15.         }  
16.     })  
17. </script>

結果：

<divid="app">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

②索引編號：

在標籤裡使用$index，即表示當前索引在v-for中的編號（從0開始）；

例如上面改為：

[javascript] view plain copy

1. <li v-for="i in items">{{i}}'s index is {{$index}}</li>  

顯示的是從0~2

③template v-for 用於包裹多個標籤的v-for

簡單來說，需要將多個標籤都用v-for遍歷，那麼就需要用template標籤。

同樣，template在實際渲染的時候不會出現，只是起到一個包裹作用。

如程式碼：