<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(value, key) in msg">{{key}} - {{value}}</li> </ul> </div> <script src="../vue.js"></script> <script> /* 在Vue中的一些情况里 对象新增属性是没有响应式 我们需要使用Vue.set方法给对象添加新的属性才会有响应式效果 Vue.set(对象, '新增属性名', '属性值') Vue.delete(对象, '要删除的属性名') this.$set(对象, '新增属性名', '属性值') this.$delete(对象, '要删除的属性名') ... 扩展运算符 var arr = [1,2,3,4] var arr2 = [7,8,9] // arr2.push(arr) [7,8,9,[1,2,3,4]] arr2.concat(arr) [7,8,9,1,2,3,4] const arr3 = [...arr2, ...arr] var obj = {a: 1} var obj2 = {b: 2} {a: 1, b: 2} */ const app = new Vue({ el: "#app", data: { msg: { a: 1, b: 2, c: 3, d: 4 } } }) </script> </body> </html>