SOURCE

var vm = new Vue({
  el:"#app",
  data:{
    newPerson:{
      name:'',
      age:0,
      sex:'Male'
    },
    people:[
      {name:'Jack',age:30,sex:'Male'},
      {name:'Bill',age:23,sex:'Male'},
      {name:'Tracy',age:21,sex:'Female'}
    ]
  },
  methods:{
    createPerson:function(){
			this.people.push(this.newPerson);
  		this.newPereson={name:'',age:0,sex:'Male'}
    },
    deletePerson:function(index){
  		this.people.splice(index,1)
		}
	}
})

<div id="app">
  <fieldset>
    <legend>Create New Person</legend>
    <div class="form-grop">
      <label for="">Name:</label>
      <input type="text" v-model="newPerson.name"/>
    </div>
    <div class="form-grop">
      <label for="">Age:</label>
      <input type="text" v-model="newPerson.age"/>
    </div>
    <div class="form-grop">
      <label for="">Sex:</label>
      <select name="" id="" v-model="newPerson.sex">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>
    <div class="form-grop">
      <label for=""></label>
      <button @click="createPerson">Create</button>
    </div>
  </fieldset>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Sex</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(person,index) in people">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.sex}}</td>
        <td :calss="'text-center'">
          <button @click="deletePerson(index)">delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  font-size:12px;
  font-family:Ununtu,simHei,sans-serif;
  font-weight:400;
}
body{
  font-size:2rem;
}
table,td,th{
  border-collapse:collapse;
  border-spacing:0;
}
table{
  width:100%;
}
td,th{
  border:1px solid #bcbcbc;
  padding:5px 10px;
}
th{
  background:#42b983;
  font-size:1.2rem;
  font-weight:400;
  color:#fff;
  cursor:pointer;
}
tr:nth-child(odd){
  background:#fff;
}
tr:nth-child(even){
  background:#eee;
}
fieldset{
  border:1px solid #bcbcbc;
  padding:5px;
}
input{
  outline:none;
}
input[type=text]{
  border:1px solid #ccc;
  padding:.5rem .3rem;
}
input[tpe=text]:focus{
  border-color:#42b983;
}
button{
  outline:none;
  padding:5px 8px;
  color:#fff;
  border:1px solid #bcbcbc;
  border-radius:3px;
  background-color:#009a61;
  cursor:pointer;
}
button:hover{
  opacity:0.8;
}
#app{
  magin:0 auto;
  max-width:640px;
}
.form-group{
  margin:10px;
}
.form-group>label{
  display:inline-block;
  width:10rem;
  text-align:right;
}
.form-group>input,.form-group>select{
  display:inline-block;
  height:2.5rem;
  line-height:2.5rem;
}
.text-center{
  text-align:center;
}
.pagination{
  display:inline-block;
  padding-left:0;
  margin:21px 0;
  border-radius:3px;
}
.pagination > li >a{
  position:relative;
  float:left;
  padding:6px 12px;
  line-height:1.5;
  text-decoration:none;
  color:#009a61;
  background-color:#fff;
  border:1px solid #ddd;
  margin-left:-1px;
  list-style:none;
}
.pagination>li>a:hover{
  background-color:#eee;
}
.pagination .active{
  color:#fff;
  background-color:#009a61;
  border-left:none;
  border-right:none;
}
.pagination .active:hover{
  background:#009a61;
  cursor:default;
}
.pagination>li:first-child>a .p{
  border-bottom-left-radius:3px;
  border-top-left-radius:3px;
}
.pagination>li:last-child>a{
  border-bottom-right-radius:3px;
  border-top-right-radius:3px;
}