利用Vue.js来制作一个小的Demo1

      这个Demo主要是使用一些基础的Vue.js来通过增加用户的名字的同时，当提交的时候，表格上的人员名单也会更加，如果想要删除某个人员，那么可以通过删除的按钮来进行操作，当点击了相应的人员的按钮之后，该人员的资料就会删除。

   
   

<script src="https://unpkg.com/vue/dist/vue.js"></script>



   
   


    
    


     
     
Create New Person

     
     


      
      


       
       
 
        Name: 
         
       

       
       
 
        Age: 
         
       

       
       
 
         
       

      
      

     
     

    
    

    
    
Name
Age
Delete
{{person.name}}
{{person.age}}
Delete

   
   

<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>

这里主要是使用了双向数据绑定v-model，然后当事件发生时，对其做相应的处理，这里用到一个v-for，这个是循环渲染指令，其中有一个index的属性，可以用来标记删除人员的下标。