本篇是笔者自己练习的案例，其中可能存在很多新手错误
这是一个简单的表格形式的记录添加和删除实现。
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><!-- CDN形式引入Vue -->
<style>
a{
font-size: 12px;
color:rgb(0, 132, 255);
}
a:hover{
font-size: 12px;
text-decoration: underline;
}
.mTable{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width:100%;
margin: 5px 0px;
}
.mTable tr{
border-bottom: 1px solid #ccc;
padding: 5px 0px;margin: 0px;
background-color: aliceblue;
}
.mTable th{
border-bottom: 1px solid #ccc;
padding: 5px 0px;margin: 0px;
background-color: rgb(79, 173, 255);
}
.mTable td{
border-bottom: 1px solid #ccc;
padding: 5px 0px;margin: 0px;
background-color: aliceblue;
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<input type="text" placeholder="姓名" v-model="newRec.name">
<select v-model="newRec.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="number" placeholder="年龄" v-model="newRec.age">
<button @click="add">新增</button>
<table id="table" class="mTable" cellpading="0" cellspacing = 0 border="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="rec in recs" :key="rec.id">
<td>{{rec.name}}</td>
<td>{{rec.sex}}</td>
<td>{{rec.age}}</td>
<td><a @click="remove($event,rec.id)">删除</a></td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
recs:[
{id:"001",name:"张三",sex:"男",age:18},
{id:"002",name:"李四",sex:"女",age:28},
{id:"003",name:"王五",sex:"男",age:38},
],
newRec:{
id:"",
name:"",
sex:"男",
age:null
}
},
methods: {
add(){
//动态创建id
this.newRec.id = "00" + this.recs.length + 1
//创建新纪录 newRec的副本
const nRec = {}
for (let key in this.newRec) {
nRec[key] = this.newRec[key]
}
//添加新纪录
this.recs.push(nRec)
//清空
this.newRec.id = ""
this.newRec.name = ""
this.newRec.sex = "男"
this.newRec.age = null
},
remove(e,key){
e.preventDefault();//阻止超链接的默认点击行为
let index;
for(let i=0;i<this.recs.length;i++){
if(this.recs[i].id == key){
index = i
}
}
this.recs.splice(index,1)
}
},
})
</script>
</body>
</html>