vue向list中添加数据_vue点击添加数据

通过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 数组里面。

Document

}table{width:603px;height:35px;

}tr{}td{width:200px;text-align:center;border:1px solid #f00;

}

姓名：性别：年龄：

添加数据

{{item.name}}{{item.sex}}{{item.age}}