Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么

条件渲染

v-if

写法:
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"

适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

实例：

// 
 苏凉
 ming
 xiaohu

// 
 点击按钮查看四大名著
 西游记
 水浒传
 三国演义
 红楼梦
 没有更多了...

v-if配合template标签来使用，template不显示在也买你中，可与v-if来使用控制一整个模块的显示和隐藏。

//

    
全部显示
    
全部显示
    
全部显示
    

v-show

写法:
v-show="表达式"

适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

//  
   苏凉
   ming
   xiaohu

备注:使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

列表渲染

v-for指令

1.用于展示列表数据
2.语法:v-for="(item,index) in xxx" : key="yyy"
3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)

 实例：

    
    
    
    
    cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript">


      
        
        
人员信息
        

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

        
        
汽车信息
        

            
                {{index}}-{{key}}-{{value}}
            
        

        
        
test
        

            
                {{index}}-{{value}}
            
        

        
        
test1
        

            
                {{index}}-{{value}}