这个Demo主要是使用一些基础的Vue.js来通过增加用户的名字的同时,当提交的时候,表格上的人员名单也会更加,如果想要删除某个人员,那么可以通过删除的按钮来进行操作,当点击了相应的人员的按钮之后,该人员的资料就会删除。
Vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Create New Person
Name Age Delete {{person.name}} {{person.age}}
<script>
new Vue({
el:'#app',
data:{
newPeople:
{
name:'',
age:0
},
people:[
{
name:'Jack',
age:30
},
{
name:'Bill',
age:26
},
{
name:'Tracy',
age:29
},
{
name:'Lily',
age:22
}
]
},
methods:{
addPeople:function(){
this.people.push(this.newPeople);
this.newPeople={name:'',age:0}
},
deletePeople:function(index){
this.people.splice(index,1);//从index中开始删除,删除一个元素
}
}
})
</script>