<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #eee;
padding: 2px 10px;
}
.box {
position: absolute;
width: 350px;
height: 320px;
border: solid 1px #ccc;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box .close {
width: 20px;
height: 20px;
background-color: pink;
text-align: center;
line-height: 20px;
position: absolute;
right: 5px;
top: 5px;
border-radius: 50%;
}
.biao {
margin-top: 30px;
margin-left: 30px;
}
</style>
</head>
<body>
<div id="box">
<button @click="han">添加</button>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in stu" :key="item.on">
<td>{{item.on}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>
<button @click="getone(index)">修改</button>
<button @click="shan(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div v-show="showBox" class="box">
<table class="biao">
<tr>
<td>学号</td>
<td><input v-model="on" type="text"> </td>
</tr>
<tr>
<td>姓名</td>
<td><input v-model="name" type="text"> </td>
</tr>
<tr>
<td>性别</td>
<td><input v-model="sex" type="text"> </td>
</tr>
<tr>
<td>年龄</td>
<td><input v-model="age" type="text"> </td>
</tr>
<tr>
<td> </td>
<td>
<button v-show="isAdd" @click="add">添加</button>
<button v-show="!isAdd" @click="update">修改</button>
<button v-on:click="remov">取消</button>
</td>
</tr>
</table>
<div @click="guanbi" class="close">X</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
new Vue({
el: "#box",
data: {
showBox: false,
isAdd: true,
upidex: 0,
stu: [
{
on: 1001,
name: "张三",
age: 18,
sex: "男",
}, {
on: 1002,
name: "李四",
age: 21,
sex: "男",
}, {
on: 1003,
name: "王五",
age: 22,
sex: "男",
}, {
on: 1004,
name: "许云鹤",
age: 25,
sex: "女",
},
],
on: "",
name: "",
sex: "",
age: ""
},
methods: {
guanbi() {
this.showBox = false;
this.on = ""
this.name = ""
this.sex = ""
this.age = ""
},
//点击大添加的时候
han() {
//让隐藏的大盒子显示
this.showBox = true,
//当isAdd时true的时候显示添加按钮 可以看上面按钮结构
this.isAdd = true
},
//点击删除时执行的函数
//点击删除的时候 传入点击的哪一个索引
shan(i) {
//以点击的这个为索引删除一个
this.stu.splice(i, 1)
},
//点击小添加的时候执行的操作
add() {
//把data里自定义的 on name age sex。push（）进stu数组里
//因为 on name age sex身上有v-model绑定 所以可以把文本框里的内容添加进数组里
this.stu.push({
on: this.on,
name: this.name,
age: this.age,
sex: this.sex,
})
},
//点击取消时执行的操作
remov() {
//点击取消时 让所有的input内容清空
this.on = ""
this.name = ""
this.sex = ""
this.age = ""
//让盒子隐藏
this.showBox = false
},
//点击修改的时候执行的操作
getone(sy) {
//根据数组中的下标 获取点击的这个对象
let stus = this.stu[sy];
//然后把点击对象里面的内容展示在input框里面
this.on = stus.on
this.name = stus.name
this.sex = stus.sex
this.age = stus.age
//点击修改的时候让盒子显示
this.showBox = true
//当isAdd时false的时候显示修改按钮 可以看上面按钮结构
this.isAdd = false
//在data里定义一个变量 把当前点击的索引存起来
this.upidex = sy
},
//修改学生
update() {
//点击修改的时候把点击的索引存起来了 在这直接引用点击的那个索引（存起来的索引）
//this.stu[this.upidex]就是点击的那个数组里面的对象
//把input里面输入的每一项值赋给stu
let stu = this.stu[this.upidex]
stu.no = this.no
stu.name = this.name
stu.sex = this.sex
stu.age = this.age
}
},
})
</script>
</body>
</html>
