通過v-model來實現數據的添加，以后會有更好的辦法。
首先，寫三個input 文本域，然后通過v-model 雙向綁定data 里面的prop 對象里面對應的字段，里面的字段都給空字符串，因為一開始沒輸入的時候是沒有值的，我這里是 v-model="prop.name"。
再然后創建一個table，里面的td 的值在data 里面的list 里拿取，我這里是{{item.name}}，table 記得v-for 循環data 里面的list 數組，不然拿不到值，看我的代碼就知道怎么做了，，這里是動態拿取，方便后面操作。
最后，寫一個按鈕button，里面寫一個方法，方法里面用let 聲明一個新的對象，然后用名稱來接收 prop 里面的值，我這里是用了newObj 來接收，為什么呢。我們首先要拿到用戶輸入的值，才可以對此進行操作。
賦值之后呢，就添加進list 數組里面，為什么呢，因為td 表格里面的值是動態拿取的，所以list 的值改變了，頁面也會跟着改變。語法是 this.list.push(newObj);。意思就是，把newObj 這個對象添加進list 數組里面。
<!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> <!-- <script src="./vue2.6.10.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> .box { padding-top: 20px; } table { width: 603px; height: 35px; } tr{} td { width: 200px; text-align: center; border: 1px solid #f00; } </style> </head> <body> <div id="app"> 姓名：<input type="text" v-model="prop.name"> 性別：<input type="text" v-model="prop.sex"> 年齡：<input type="text" v-model="prop.age"> <button @click="add">添加數據</button> <div class="box"> <table v-for="(item,index) in list" :key="index"> <tr> <td>{{item.name}}</td> <td>{{item.sex}}</td> <td>{{item.age}}</td> </tr> </table> </div> </div> <script> var app = new Vue({ el: '#app', data() { return { message: 'Hello Vue!', prop: { name: '', sex: '', age: '', }, list: [{ name: '小王', sex: '男', age: '18' }], } }, methods: { add() { let newObj = { name: this.prop.name, sex: this.prop.sex, age: this.prop.age } this.list.push(newObj); } } }) </script> </body> </html>
效果圖
結束