效果圖：
實現代碼：
<template>
<div>
<div class="all">
<p>綜合小練習</p><br>
姓名：<input type="text" v-model="newPerson.name"><br>
<p></p>
年齡：<input type="text" v-model="newPerson.age"><br>
<p></p>
性別：<select v-model="newPerson.sex">
<option value="男">男</option>
<option value="女">女</option>
</select> <br>
<p></p>
手機：<input type="text" v-model="newPerson.phone"><br>
<p></p>
<button @click="createNewPerson" >創建用戶</button>
</div>
<div class="footer">
<table>
<tr>
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>手機</td>
<td>刪除</td>
</tr>
<tbody>
<tr v-for="(p,index) in persons" :key='index'>
<td>{{index+1}}</td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.phone}}</td>
<td><button @click="delPerson(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
name:' ',
data () {
return {
persons:[
{name:'張三',age:20,sex:'男',phone:'19836038298'},
{name:'李四',age:20,sex:'女',phone:'13833338298'},
{name:'王麻子',age:20,sex:'男',phone:'13536038298'},
],
newPerson: {name:'',age:20,sex:'男',phone:''},
}
},
methods: {
createNewPerson(){
let {name,age,sex,phone}=this.newPerson;
if(name === ''){
alert("不能為空");
return ;
}
if(age <=0){
alert("不能為空");
return ;
}
if(phone === ''){
alert("手機號不能為空");
return ;
}
//插入數據
this.persons.unshift(this.newPerson);
//清空數據
this.newPerson = {name:'',age:20,sex:'男',phone:''};
},
delPerson(index){
this.persons.splice(index,1);
}
},
}
</script>