<!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>