条件渲染

v-if、v-else、v-else-if、v-show

只有当条件为true的时候，才会渲染出来，否则不显示，惰性；
<h2 v-if="isShow">...</h2>
data(){
    return{
        isShow:true
    }
}

当面对多个标签时，条件渲染的用法

这里用template，而不是用div包裹；因为template是不会存在的；
    <template v-if="isShow">
        <h2>哈哈哈</h2>
        <h2>哈哈哈</h2>
        <h2>哈哈哈</h2>
    </template>
    <template v-else>
        <h2>hhh</h2>
        <h2>hhh</h2>
        <h2>hhh</h2>
    </template>

v-show

v-show和v-if的用法差不多；
区别在于：v-show实质是 <h2 style="display:none">
html文档是会对他解析的，并且在浏览器代码里能看见，v-if就压根不存在了

v-show不支持template，不可以和v-else一起使用

v-for

<ul>
    这里就会输出两个li标签，因为movices里有2个值，index可以省略不写 
    <li v-for="(movice,index) in movices">{{movice}}</li>
    
    key是name，value是123，index是索引，可有可无
    <li v-for="(value,key,index) in info">{{value}}-{{key}}</li>
</ul>
data:{
    reutrn{
        movices:{
        "药神",
        "长津湖"
        }
        info:{
            name:'123',
            age:19 
        }
    }
}

v-for进阶

数组更新检测

splice(下标,要删除的数量,要添加的数据)

使用这些方法，当数组值改变，页面也会改变,但是会修改原来的数组

会生成新数组，需要一个新的值接收他

v-for补充

v-for需要一个key来找到属于每个属性的索引，而不是用index
<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

key的原理

<li v-for="(p,index) of persons" :key="index">
    {{p.name}}
    <input type="text">
</li>

data:{
    persons:[
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:28},
        {id:'003',name:'王五',age:16},
    ]
}

key是给li标签的唯一标识

如果:key="index"的话，就会造成 后面的input和所属里标签不匹配，如果使用:key="p.id"就可以解决

面试题：vue中的key有什么作用？

虚拟DOM中key的作用：

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

2.对比规则：

（1）：旧虚拟DOM中找到了与新虚拟DOM相同的key：
      1):若虚拟DOM中内容没变，则直接使用之前的真实DOM
      2):若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
      
（2）：旧虚拟DOM中未找到与新虚拟DOM相同的key
      创建新的真实DOM，随后渲染到页面
      

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

 （1）：若对数据进行：逆序添加、逆序删除等破坏顺序操作
 那么会产生没有必要的真实DOM的更新 ==》 界面效果没问题，但效率会低下
 
 （2）：如果结构中还包含输入类的DOM：
     会产生错误的DOM更新 ==》 界面有问题

4.开发中如何选择key？

 （1）最好使用每条数据的唯一标识最为key，比如id、手机号、学号等
 （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于展示，使用index作为key是没有问题的。