Vue条件渲染v-if和v-show

 条件渲染v-if和v-show

n:{{n}}
    点击n++
    
v-if
    
v-else-if
    
v-else

v-if和v-show小结 

 v-if

写法：1、v-if='表达式'

2、v-else-if='表达式'

3、v-else='表达式' 

适用于切换频率比较低的场景

特点：不展示的DOM元素直接被移除。

注意：v-if可以和v-else-if、v-else一起使用，但要求这三个之中不能被打断（中间不能加入其他标签）

v-show

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

适用于：切换频率比较G高的场景

特点：不展示DOM元素未被移除，仅仅是使用display样式隐藏掉

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

列表渲染v-for

    
    
    
    




遍历数组

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

    
遍历对象
    

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

    
遍历字符串
    

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

   
 遍历指定次数
    

    {{num}}--{{index}}
    

运行结果 

v-for指令小结

1、用于展示列表数据

2、语法：v-for=" (item,index) in xxx" :key=" yyy"   ，in也可以改为of

3、可遍历：数组（常用）、对象、字符串、指定次数

v-for中key的作用和原理

index作为key时

index作为key时 

 Vue中的key中的作用？（key的内部原理）

1、虚拟DOM中的key的作用：

• key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后VUe进行【新虚拟DOM】、与【旧虚拟DOM】的差异比较，比较规则如下：

2、比对规则：

①旧虚拟DOM中找到了与虚拟机DOM相同的key：

• 若虚拟DOM中内容没变，直接使用之前的真实DOM。
• 若虚拟DOM中内容变了，则生成新的真实DOM，随后渲染到页面

②旧虚拟DOM中未找到与新的虚拟DOM相同的key。则创建新的真实DOM，随后渲染到页面。

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

• 若对数据进行：逆序添加、逆序删除等破坏顺序的操作：会产生没必要的真实DOM更新，从而导致效率低，但界面效果没问题。
• 如果结构中还包含输入了的DOM：会产生错误的DOM更新，界面有问题

4、开发中如何选择key：

• 最好使用每条数据的唯一标识作为key，如id、手机号等唯一值。
• 如果不出在对数据的逆序破坏顺序的操作，仅用于页面展示，则index作为key也是可以的