Vue （十三）条件渲染与基本渲染

条件渲染

v-if

1.写法

（1）.v-if="表达式"

（2）v-else-if="表达式"

（3）v-else=“表达式”

注：v-if可和v-else-if、v-else一起使用，但必须连用结构不能被打断 2.使用场景： 切换频率较低的场景 3.特点：不展示的DOM元素直接被删除

4.搭配 template使用

v-show

1.写法：v-show=“表达式” 2.用于切换频率较高的场所 3.特点：不展示的DOM元素未被移除，样式display:none 使用v-if时元素可能无法获取到，v-show元素一定可以获取到

v-if与v-show案例

    
    
    

        
当前的n值是：{{n}}
        点我n+1

        点我n-1
        
        
        

        
        
        

        

        
        
        
        
    
    
   

基本渲染

v-for指令

1.用于展示列表数据

2.语法： v-for="(item, index) in xxx" :key="yyy"

3.可遍历：数组、对象、字符串(用的很少)、 指定次数(用的很少)

    

        
        
人员列表(遍历数组)
        

            
            

                {{p.name}}-{{p.age}}
            
        
        
        
汽车信息(遍历对象)
        

            

                {{k}}-{{value}}
            
        
        
        
测试遍历字符串
        

            

                {{a}}-{{b}}
            
        
        
        
遍历指定次数(用的少)
        

            

                {{index}}-{{number}}
            
        
    
    
    

key的原理

1. 虚拟DOM中key的作用（key存在于虚拟DOM不会在真实DOM中）

key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，

随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较

2. 对比规则：

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key

①若虚拟DOM中内容没有变化，直接使用之前的真实DOM

②若虚拟DOM中内容变了，则生成的新的DOM随后替换掉之前页面的真实DOM

（2）旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM随后渲染到页面

3. 用index作为key可能会引发的问题

（1）若对数据进行逆序操作（破坏顺序）且结构中不包含输入类（input框等）的DOM，

则会产生没有必要的真实DOM更新，界面效果一般不会有问题但是效率较低

（2）如果结构中包含输入类的DOM，会产生错误DOM更新，界面有问题

4. 开发中如何选择key

(1)最好选择每条数据的唯一标识作为key,如ID、学号等

(2)如果不存在对数据的逆序操作，仅适用于渲染列表展示，适用index做为key是没有问题的

案例（点击按钮在原来数组中的第一个位置添加老刘）

    

        
         
人员列表(遍历数组)
         添加一个老刘
         

             
             

                {{p.name}}-{{p.age}}