如何用Vue实现数组与对象的长尾词遍历及修改操作？

本文共计904个文字，预计阅读时间需要4分钟。

目录：

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

2.对数组进行循环

3.修改数组的时间点，不能直接通过下标去增加、删除、修改

4.对对象进行循环

5.添加对象的时间点

6.修改数组和对象的特殊情况下处理

目录

• 对数组和对象进行遍历和修改
• 1、对数组进行循环
• 2、 修改数组的时候，不能直接通过下标去增加修改删除
• 3、对对象进行循环
• 4、增加对象的时候
• 修改数组和对象的特殊情况以及修改方法
• 修改数组的两个特殊情况
• 修补方法

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

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”<此处代表要增加的属性>,“女”)

<!-- v-for的使用 --> <div id="app7"> // 对数组进行循环 <template v-for="(item,index) of list" :key="item.id"> <div> {{item.text}} ---- {{index}} </div> <span> {{item.text}} ---- {{index}} </span> </template> //对对象进行循环 <template v-for="(item,index,key) of obj"> <div> {{item}} ---- {{index}}-----{{key}} </div> </template> </div>

<script> var app7 = new Vue({ el: '#app7', data: { list: [ { id: "1", text: '1' }, { id: "2", text: '2' }, { id: "3", text: '3' }, ], obj: { name: 'mao', age: 28, address: 'liulin' } } }) </script>

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

div部分

  <div id="root">     {{title}}     <my-header></my-header>     {{list}}     {{obj}}   </div>   <div id="app">     {{title}}   </div>

script部分

  <script>     // 全局定义的组件     Vue.component('my-header', {       template: `         <header>title</header>       `     })     // 实例化Vue     var vm = new Vue({       el: '#root',       data: {         title: 'hello',         list: ['a', 'b'],         obj: {           x: 0         }       }     })     var vm2 = new Vue({       el: '#app',       data: {         title: 'world'       }     })   </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()

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