Vue中对数组和对象进行遍历和修改方式_vue.js_

对数组和对象进行遍历和修改

1、对数组进行循环

v-for进行循环，有两个参数（item，index）

注意：template可以成为占位符，在DOM里面不显示

2、 修改数组的时候，不能直接通过下标去增加修改删除

（1）可以用过push/pop/shift/unshift/splice/sort/reverse方法

（2）也可以直接改变（重新定义）list数组的整体 （var list = [ ]）

（3）全局的Vue.set(app7.list,1<此处代表下标>,2)

局部的app7.$set(app7.list,1<此处代表下标>,2)

3、对对象进行循环

v-for进行循环，有三个参数（item，index，key）

4、增加对象的时候

（1）通过重新定义引用的对象 （var obj = { }）

（2）set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)

局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”) 

 // 对数组进行循环  //对对象进行循环 

修改数组和对象的特殊情况以及修改方法

div部分

  
     {{title}}          {{list}}     {{obj}}   
   
     {{title}}   

script部分

修改数组的两个特殊情况

1.arr.length = 0, 不具备响应特性

2.arr[0] = 100, 不具备响应特性

• 修改对象的特殊情况
• 添加obj.x，x属性，也不具备响应特性

修补方法

vm.$set(target, propertyName/index, value)//实例化一个vue，试用贴set属性改变对应的value值 Vue.set(target, propertyName/index, value)//直接使用vue的属性，要与实例化vue方法区分，这个没有$ vm.$forceupdate()

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！