<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的VueDemo</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.table {
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<div class="form-group">
<label for="group">姓名</label>
<input type="text" v-model="person1.name">
</div>
<div class="form-group">
<label for="author">编号</label>
<input type="text" v-model="person1.num">
</div>
<div class="form-group">
<label for="price">等级</label>
<input type="text" v-model="person1.score">
</div>
<button class="btn btn-success" v-on:click="addPerson()">添加</button>
<table class="table table-bordered" class="table">
<thead>
<tr>
<th>姓名</th>
<th>编号</th>
<th>等级</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.num}}</td>
<td>{{person.score}}</td>
<td><button class="btn btn-warning" @click="delPerson(person)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
person1: {
name: "",
num: "",
score: ""
},
people: [{
name: "AAAAA",
num: "000001",
score: "01"
},
{
name: "BBBBB",
num: "000002",
score: "02"
},
{
name: "CCCCC",
num: "000003",
score: "03"
},
]
},
//在methods中定义方法
methods: {
//新增成员信息
addPerson: function() {
this.person1.id = this.people.length + 1;
this.people.push(this.person1);
this.person1 = {};
},
//删除成员信息
delPerson: function(person) {
this.people.splice(this.people.indexOf(person), 1);
}
}
})
</script>
</html>
