关键词：v-if，v-for，v-show

1.v-if，v-for，v-show三大指令都用于<template></template>中

2.v-if

v-if，如果为false，则什么也不编译，不渲染。 当第一次条件为真时，才开始编译。简单来说，该值为true则显示该标签，为false则不显示；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <div id="app">  
     <div v-if="abc">{{abc.a}}</div>  
 </div>  
 <script>  
     var vm = new Vue({  
         el: '#app',  
         data: {  
             abc: {  
                 a: "1"  
             }  
         }  
     })
     <pre name="code" class="javascript">  
 </script> 
 // 当abc这个对象存在时，显示这一行数据，其内容为abc.a的值；
//假如abc这个对象不存在，那么则不显示；

3.v-show: 用于控制该标签的display样式

1
2
3
<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
//cart-count的值food.count>0时，则正常显示；
//cart-count的值food.count<=0时，则自动添加display:none；
1
2
3
<div class="num" v-show="totalCount>0">{{totalCount}}</div>
//num的值totalCount>0时，则正常显示；
//num的值totalCount<=0时，则自动添加display:none；

4.v-for: 用于列表渲染

【1】items是一个对象或者数组；
【2】该格式相当于for(var i in items)
【3】插值的i相当于items[i]
【4】该li会被复制多个，然后依次被items[i]渲染，直到渲染完毕；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app">  
    <ul>  
        <li v-for="i in items">{{i}}</li>  
    </ul>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            items: {  
                a: "1",  
                b: "2",  
                c: "3"  
            }  
        }  
    })  
 </script> 
//输出结果 
<div id="app">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

5.v-if和v-show的比较

v-if

  • 渲染时间：第一次为真时
  • 切换形式：动态生成，局部编译/卸载
  • 生成消耗：较小（只生成为真的部分）
  • 切换消耗：较大（切换时需要局部编译）

v-show

  • 渲染时间：刚开始就渲染
  • 切换形式：较大（生成全部）
  • 生成消耗：较大（生成全部）
  • 切换消耗：较小（因为生成时已经渲染完成）