Vue条件渲染与列表渲染

条件渲染

1. v-if
   1. 写法：
      1. v-if="表达式"
      2. v-else-if="表达式"
      3. v-else="表达式"
   2. 适用于：切换频率较低的场景。
   3. 特点：不展示的DOM元素直接删除。
   4. 注意：v-if可以与：v-else-if、v-else一起使用，但要求结构不能被打断。
2. v-show
   1. 写法：v-show='表达式'。
   2. 适用于：切换频率较高的场景。
   3. 特点：不展示的DOM元素会被隐藏。
3. 备注：使用v-if时，元素可能无法获取到，二使用v-show一定可以获取到。

    
当前值：{{val}}
    点击增加值
    
    我是第一个值
    我是第二个值
    我是第三个值
    
    

    
    ******我是第一个值******
    ******我是第二个值******
    ******我是第三个值******

    

    
    -------我是第一个值
    -------我是第二个值
    -------我是第三个值

    

    
    #######我是第一个值#######
    #######我是第二个值#######
    #######我哪个值都不是#######

v-if与template配合使用

    
当前值：{{val}}
    点击增加值
    
    

    
    

列表渲染

v-for指令：

1. 用于展示列表数据。
2. 语法：v-for="(item,index) in xxx" :key="yyy"，index有添加或者删除的场景下一般不当作key，key一般用数据的id。
3. 可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）。

遍历数组

    
    
{{p.id}}------------{{p.name}}----------下标：{{index}}
    
    

遍历对象

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

1. 虚拟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
      1. 创建新的真实DOM，随后渲染到到页面。
   3. 用index作为key可能会引发的问题
      1. 若对数据进行：逆序添加，逆序删除等破坏顺序的操作，会产生没有必要的真是DOM更新->界面效果没有问题，但效率低。
      2. 如果结构中还包含输入类的DOM：会产生错误的DOM更新->界面有问题。
   4. 如何选择key
      1. 最好使用每条数据的唯一标识作为key，比如id，手机号。
      2. 如果不存在对数据的逆序操作，逆序删除等破幻顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表渲染 

模糊查询功能的实现

模糊查询时优先使用computed。

使用监听器的方式查询

人员列表


    

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

使用计算属性的方式查询

    
人员列表
    
    

        

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

列表排序

    
人员列表
    
    年龄升序
    年龄降序
    年龄原书序
    

        

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

关于数组的更改

例如：vm.myArr[0]="xin";这样vue监测不到数据的改变，不会时模板重新解析。

只有调用push(),pop(),shift(),unshift(),splice(),sort(),reverse()这七个方法操作数组时Vue才会监测到数组的改变并重新解析模板。

Vue.ser(vm.myArr,0,"xin");    //设置第一个元素为‘xin’。

vm$.ser(vm.myArr,0,"xin");    //设置第一个元素为‘xin’。

上面两种方式也可以更改数组元素后被Vue监测到并解析模板。

也可以用新的数组替换掉旧的数组，替换后模板也会重新解析。

Vue监视数据的原理（总结）

1. vue会监视data中所有层次的数据，
2. 如何监视对象中的数据？
   1. 通过setter实现监视，且要在new Vue时就传入要监测的数据。
   2. 对象中后期追加的属性，Vue默认不做响应处理
   3. 如果给后期添加的属性做响应式，请使用如下的API其中之一。
      1. Vue.set(target,propertyName/index,value)
      2. Vue.$set(target,propertyName/index,value)
      3. 也可以用新的数组替换掉旧的数组，替换后模板也会重新解析。
3. 如何监视数组中的数据？
   1. 通过包装数组更新原色的方法实现，本质就是做了两件事：
      1. 调用原生对应的方法对数组进行更新。
      2. 从新解析模板，进而更新页面。
4. 在Vue修改数组中的某个元素一定要用如下方法：
   1. push(),pop(),shift(),unshift(),splice(),sort(),reverse()。
   2. Vue.set()或者vm.$set()。
5. 特别注意，Vue.set()和vm.$set()不能给vm或者vm的根数据对性添加属性！！