2022-10-27
实验结果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" align="center" width="300px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(user,index) in userList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
<td>
<input type="button" value="删除" @click="deleteUser(index)">
</td>
</tr>
</table>
<table align="center">
<tr>
<td>编号：</td>
<td><input type="text" v-model="user.id"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" v-model="user.name"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="text" v-model="user.gender"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="添加" @click="addUser">
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
user:{
id:"",
name:"",
gender:"",
},
userList:[
{id:101,name:"张三",gender:"男"},
{id:102,name:"李四",gender:"男"},
{id:103,name:"王五",gender:"男"},
]
},
methods:{
addUser:function(){
//1.将用户输入的数据变为User对象
//2.将User对象添加
this.userList.push(this.user);
//3.添加之后要把内容复空
this.user={}
},
deleteUser:function(i){
this.userList.splice(i,1);
}
}
})
</script>
</body>
</html>
标签：name,表格,gender,笔记,userList,添加,user,id From： https://www.cnblogs.com/isDaHua/p/16833342.html