---

条件渲染

条件渲染指令是用来辅助开发者控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是：
v-show和v-if
v-show和v-if的区别：
v-show是通过动态的为元素添加或移除display：none来进行显示与隐藏。如果需要频繁切换元素的显示状态，用v-show性能会更好。
v-if是通过动态的创建或移除元素来实现元素的显示和隐藏。如果不需要频繁切换元素的显示状态，用v-if性能会更好。
v-if配套的指令：
v-else-if 跟else if使用差不多
v-else 跟else使用差不多

    



    

        

            
点我展示下拉框
        
        

            
下拉框一
            
下拉框一
        
        

            
            未年人
            
        
        

            
                成年人
            
        
    
    
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

循环渲染

1.v-for循环普通数组:v-for=“(em,index) in arr1”
2.v-for循环对象数组:v-for=“(em,index) in arr2”
3.v-for迭代对象:v-for=“(em, index) in arr3”
4.v-for迭代数字:v-for=“count in 10”

    

        
        

            
{{em}}
        

        
        

            
{{em.name}}
               {{em.age}}
               {{em.like}}
            
        

        
        

           {{em}}
        

        
        
        

         
第{{count}}次
        
    
    
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

v-for中key的意义
vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用;这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来。

    

        
活动:从10件商品中选择5件商品作为奖励
        加载新的商品
        提交
        

            

                
                {{item.name}}
            
        
    

    
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
26
27
28
29
30
31
32
33
34

for和if同一个标签bug：
当for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for
渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染
这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

解决方案把for弄到最外层
如果if和for套在一层,数据容器发生变化时,if会重新判断一遍
嵌套的写法 数据容器变化时 if只判断新增的数据
这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中
解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment