<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .activated {color: red} </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="handleObjForeachload">对象遍历动态加载数据</button> <p>对象遍历</p> <template v-for="(value, key, index) of listObj" > <p>对象{{value}} --- {{key}} --- {{index}}</p> <p>数组{{arr[index]}}---- {{index}}</p> </template> </div> </body> <script type="text/javascript"> let vm = new Vue({ el: '#app', data: { listObj: { "goodsId": "0001", "goodsPrice": "￥5899.00", "goodsInfo": "直降500元！到手价5899元！享12期免息！低至16.2元/天", "goodsShop": "华为京东自营官方旗...", "goodsImg": "http://..............." }, arr: ['nice', 'to', 'meet', 'you', 'too'] }, methods: { handleObjForeachload () { // set方法给对象动态添加属性 this.$set(this.listObj, 'goodsAdress', 'beijing') //给对象同时添加多条属性 this.listObj = Object.assign({}, this.listObj, { phone: '188888888', mail: '1111@qq.com' }); // set方法给数组动态添加值//没有单独循环数组，添加同样多的数据 this.$set(this.arr, this.arr.length, '!!!!!') this.$set(this.arr, this.arr.length, 'hello') this.$set(this.arr, this.arr.length, 'jack') console.log(this.listObj) console.log(this.arr) } } }) </script> </html>