!DOCTYPE html html lang="zh" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / meta http-equiv="X-UA-Compatible" content="ie=edge" / titlevue修改数组元素方法/title /head body div id="
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>vue修改数组元素方法</title> </head> <body> <div id="root"> <div v-for="item in arr"> {{ item }} </div> <button @click="changeArr1">修改数组元素方法--方法一</button> <button @click="changeArr2">修改数组元素方法--方法二</button> <button @click="changeArr3">修改数组元素方法--方法三</button> <button @click="getTheArr">获取数组元素</button> <button @click="getTheNewArr">获取新数组元素</button> <button @click="addUserObj">增加/修改对象元素</button> <button @click="delUserObj">删除对象元素</button> <button @click="updateUserObj">修改/增加对象元素</button> <button @click="printUserObj">打印对象元素</button> <button @click="addUserArr">增加数组元素</button> <button @click="delUserArr">删除数组元素</button> <br>//遍历数组： <div v-for="(v, k, index) in user"> <p> uid: {{k}}, avatar: {{v.avatar}}, nick: {{v.nick}} </p> </div> <div v-for="item in user"> {{item.nick}}——{{item.avatar}} </div> 点一次显示一个头像 <div></div>> </div> <script src="./vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: ‘#root‘, data: { arr: [1, 2, 3], user: { "1": { "avatar": "xxx.xx/1.png", "nick": "你爹" }, "2": { "avatar": "xxx.xx/2.png", "nick": "你爷" }, } }, methods: { changeArr1: function() { Vue.set(vm.arr, 0, ‘方法一‘); }, changeArr2: function() { vm.$set(vm.arr, 0, ‘方法二‘); }, changeArr3: function() { this.arr.splice(0, 1, ‘方法三‘); //vm.arr.splice(0,1,‘方法三‘); }, //获取元素 getTheArr: function() { console.log(this.arr[0]); }, //获取元素 getTheNewArr: function() { console.log(this.user["1"]["avatar"]); }, //给对象增加元素 addUserObj: function() { console.log(this.user) Vue.set(this.user, "3", {"avatar":"xxx.xx/3.png","nick":"阿三"}) console.log(this.user); console.log(this.user["3"]["avatar"]); }, //删除对象元素 delUserObj: function() { //console.log(this.user["1"]["avatar"]) console.log(this.user); Vue.delete(this.user, "1"); console.log(this.user); }, updateUserObj: function() { Vue.set(this.user, "3", {"avatar":"yyy.yy/3.jpg","nick":"三哥"}) }, //给数组添加元素 addUserArr: function() { this.arr.push("嘿嘿嘿"); console.log(this.arr); }, //删除数组中元素 delUserArr: function() { arrLen = this.arr.length; Vue.delete(this.arr, arrLen - 1); console.log(this.arr); }, //在js中遍历vue的data中的内容 printUserObj: function() { for (let key in this.user) { console.log(key, this.user[key]["nick"], this.user[key]["avatar"]); } } } }); </script> </body> </html>