vue之v-for及vue中哪些数组方法是响应式的

652 阅读2分钟

v-for用于遍历数组和对象

例子:

<body> 

   <div id="app"> 

      <h2 v-for="item in name">{{item}}</h2>     //只显示valeu的值

     <h2 v-for="(value,key) in info">{{key}}:{{value}}</h2>

     </div> 

   <script> 

       const app =new Vue({ 

               el:'#app', 

               data:{

                   name:['jia','yu','hao'], 

                   info:{ name:'yu', age:22, height:1.70 } }, 

             methods:{ 

                      btn1(){ this.counter++ }, 

                      btn2(abc){ this.counter--, console.log('+++++',event) } 

                    } 

              }) 

    </script> 

 </body>

结果显示

第一个v-for运行结果:

jia

yu

hao

第二个v-for运行结果:

name:yu

age:22

height:1.70

当遍历对象时,获取key和value的值用<h2 v-for="(value,key) in info">{{key}}:{{value}}</h2>value值重要在前面

当想要获取index直接加index如:<h2 v-for="(value,key,index) in info">{{index}}.{{key}}:{{value}}</h2>

官方推荐我们在使用v-for时候在对应的元素或者组件上添加一个key属性,key属性添加的最好是唯一值:<li v-for="item in info" :key="item">{{item}}</li>主要是用于当有很多相同节点时候希望在中间插入一个新的节点如在A,B,C中间插入E使变成A,B,E,C,加上key为提高效率让内部效率更高,1.A 2.B 3.C加上key前1.A 2.B 3.E 4.C,而有key后变成1.A 2.B 4.F 3C.一个是向后退一位,每个都变化,一个是在中间插入不改变后面的。

数组响应式的方法:

push():在最后插入

pop():从最后删除

shift():从开头删除

unshift():从开头添加

splice(开始位置,删除个数,插入内容):/删除/插入/替换

sort():排序

reverse():反转

注意:通过索引值直接修改参数值不能修改a[2]='cccc'