通过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>
效果图
结束