Vue2 条件渲染&列表&数组元素更新

条件渲染

v-if

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

    2.不展示的dom元素直接被删除,只能与v-if配合使用，不可以跟v-show

    3.可以连用

     v-if=" "

     v-else-if =" "

     v-else=" "

    必须要写在一起，结构不能被打断

        <h2 v-if="n===1">1</h2>
        <h2 v-else-if="n===2">2</h2>
        <h2 v-else-if="n===3">3</h2>
        <h2 v-else>4</h2>

v-show

1.适用于切换频率较高的场景

2.不展示的dom元素被隐藏 （display:none类似）

 <h2 v-show="n===1">hello</h2>

列表展示

遍历数组 item是每一个对象，index为索引

<li v-for="(item,index) in person" :key="item.id">
 {{item.name}}---{{item.age}}</li>

遍历对象 第一个收到的是值，第二个是键

<li v-for="(value,key) in car" :key="k">
 {{value}}---{{key}}</li>

• 遍历数组 item就是每一个数组元素

• 生成1-n的数字,索引还是从0开始

v-for='item in 10'  ==>1,2,3...10

列表过滤

使用filter函数对数组操作

filterPerson(){
  return this.person.filter((item)=>{
    return item.name.indexOf(this.keyWord) != -1; //===> return []
})

将filter产生的新数组return出去，数组名为filterPserson

列表排序

使用sort方法对数组操作

filterPerson(){
                const arr = this.person.filter((item)=>{
                  return item.name.indexOf(this.keyWord) != -1;
                })
                if(this.sortType){
                  arr.sort((a,b)=>{
                  return this.sortType == 1 ? a.age - b.age : b.age - a.age;
                })
                }
                return arr;
            }

key和diff算法

key是虚拟DOM对象的标识，当数据发生变化时，vue会根据根据新的数据形成新的虚拟DOM，然后新的DOM会与旧的DOM元素进行比对，最终将虚拟DOM转换为真实DOM

    新旧的key相同的虚拟DOM：比较他们的内容是否一致，一致则直接复用。不一致的部分重新生成真实的DOM
    key不同的虚拟DOM：创建新的真实的DOM，渲染到页面

vue的响应式

为了实现响应式页面，通过对data中的数据进行加工，为每一个data中的属性加了getter和setter,只要data中数据一改变，set就被调用，并且重新解析模板，实现页面的更新。

Vue.set

vue中如果要给对象直接加一个属性如this.person.age=18,vue会监听不到对象的改变，页面也不会显示，age也不会配置get,set

如果想让后增加的属性具有get,set,可以使用vue.set('this.person','age',18)这种方式，set的第一个配置对象不能是vm和vm.data,只能是data中的对象

只要是data中的对象，vue就会为其属性配置setter和getter，在数组中的对象也是，只要修改对象中的属性就会重新解析模板

只能给data数据中的对象数据上增添一个新的属性

Vue.set(target,key,value)

Vue.set(this.person, "sex", "男")

数组元素的更新

vue没有为数组元素配置get,set,直接更改数组元素，vue不会监听改变，也不会渲染到页面

vue中数组元素如果arr[0]='hello'这样进行修改，vue将无法监听到数组的变化，因为没有配置get，set

正确做法是使用一下7个方法或创建一个新的数组来接收过滤后的元素，来展示到页面
  

        
    1。可以用Vue.set(this.person, 0, “男”) 0代表数组中元素的索引值，将数组中索引为0的元素改为男

    2.vm.person.push(“男”) 使用数组方法 vm.person.splice(0,1,“男”)

    3.splice（从第几个元素开始，删除几个，在删除元素的位置添加的新元素）

var arr = [1,2,3,4,5];

// 添加
arr.splice(0,0,0);// [0,1,2,3,4,5]

// 修改
arr.splice(0,1,23);// [23,1,2,3,4,5]

// 删除
arr.splice(0,1);//[1,2,3,4,5]

这些方法可以实现数组元素的更新，让页面发生更新

这些方法都改变的是原数组，不产生新数组

##收集表单提交数据

爱好<input type="checkbox" v-model="hobby" value="足球">足球   //复选框的value配置之后，hobby写成[]，收集到的就是['足球'],如果不配置value，hobby是'',收集的
                                                                true/false
性别<input type="radio" v-model="sex" name="sex" value="男">男 
    <input type="radio" v-model="sex" value="女">女           //单选框value必须配置，name属性必须一致

@change 和 @click的区别

@change 是在内容改变的时候触发 @click是在点击的时候触发，此时内 容还没有改变

##v-html

可以直接解析html模板，但具有安全性的风险，一般表单提交不能使用v-html

v-cloak

防止页面因为网速慢没有解析完vue模板而出现{{XXX}}的问题

在vue实例创建完毕并接管容器之后就会删除该属性

配合css使用[ v-cloak]:{display:none} [v-clock]属性选择器

 <h2 v-cloak>{{name}}</h2>
 [v-cloak]: {
    display:none;
 }

v-once

• 从vue的data中第一次渲染到界面之后，data中数据的变化不再影响页面

  <h2 v-once>{{name}}</h2>

v-pre

直接跳过vue的解析，渲染到页面

一般在没有用到vue的插值语法、指令语法的节点，加快编译速度

<h2 v-pre>hello,world</h2>
<h2>{{name}}</h2>