1. <body>
    2.     <div id="app">
    3.         <!-- v-model可以实现数据的双向绑定视图更新,数据更新。-->
    4.         <!-- 添加的功能 -->
    5.         name:<input type="text" v-model="newItem.name">
    6.         id:<input type="text" v-model="newItem.id">
    7.         <button @click="doAdd()"></button><!-- ()可加可不加 -->
    8.         <div v-for="item of arr">
    9.             {{item.name}}
    10.         </div>
    11.     </div>
    12.     <script>
    13.         new Vue({
    14.             el:"#app",
    15.             data:{
    16.                 newItem:{
    17.                     name:"",
    18.                     id:""
    19.                 },
    20.                 arr:[
    21.                     {name:"we",id:1001},
    22.                     {name:"you",id:1002},
    23.                     {name:"my",id:1003},
    24.                 ]
    25.             },
    26.             methods:{
    27.                 doAdd(){
    28.                     // console.log(this.newItem);
    29.                     var res = {...this.newItem}
    30.                     this.arr.push(res)
    31.                 }
    32.             }
    33.         })
    34.     </script>
    35. </body>

    image.png image.png