实现效果
<template>
<div>
<h2>学员信息表</h2>
<p>姓名: <input type="text" v-model="name"></p>
<p>年龄: <input type="text" v-model="age"></p>
<p>性别: <input type="text" v-model="sex"></p>
<p>学籍: <input type="text" v-model="ada"></p>
<button @click="add">添加</button>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>学籍</th>
<th>操作</th>
</tr>
<tr v-for="item in stus" :key="item">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.ada}}</td>
<td><button @click="del">删除</button></td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
stus:[
{name:'张三',age:18,sex:'男',ada:'北京'},
{name:'李四',age:19,sex:'男',ada:'日本'},
{name:'哈哈',age:18,sex:'男',ada:'北京'},
],
name:'',
age:'',
sex:'',
ada:'',
}
},
methods:{
add(){
if(this.name=='')
{alert("不能为空");
return false;
}
let newmsg={name:this.name,age:this.age,sex:this.sex,ada:this.ada};
this.stus.push(newmsg);
this.name=='',
this.age=='',
this.sex=='',
this.ada==''
},
del(i){
console.log(i);
this.stus.splice(i,1)
}
}
}
</script>
<style scoped>
table{
width: 500px;
height: 400px;
border: 1px solid rebeccapurple;
}
table tr td{
text-align: center;
}
</style>