Add and delete user information table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户信息表的添加删除</title>
<script src="vue.js"></script>
</head>
<body>
<div id="id01">
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr v-for="(user, index) in userList" :key="user.id" :class="{
'oddStyle': isOdd(index)}">
<td>{
{user.id}}</td>
<td v-text="user.name_xy"></td>
<td><button @click="del(index)">删除</button></td>
</tr>
</table>
<input type="text" v-model="id">
<input type="text" v-model="userName">
<input type="button" @click="addUser()" value="添加">
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#id01",
data: {
id: 5,
userName: "小印",
userList: [
{
id: 1, name_xy: "小印01"},
{
id: 2, name_xy: "小印02"},
{
id: 3, name_xy: "小印03"},
{
id: 4, name_xy: "小印04"}
]
},
methods: {
isOdd(indexs) {
var res = indexs % 2;
if (res == 0) {
return true;
} else {
return false;
}
},
addUser() {
this.userList.push({
id: this.id++,
name_xy: this.userName
})
},
del(index_xy){
this.userList.splice(index_xy, 1);
}
},
})
</script>
<style>
table {
width: 600px;
border-collapse: collapse;
}
table td {
border: solid 1px #ff6700;
}
.oddStyle {
background-color: rgb(99, 188, 240);
}
</style>
Take a few notes so you can read them later.