Vue
使用Vue.js搭建简单的表格页面
使用Vue.js搭建简单的表格页面
html>head>meta charset="utf-8" />title>我的VueDemotitle>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.
<!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>
更多推荐
- 5927
- 1
- 0
- 0
扫一扫分享内容
- 分享
已为社区贡献1条内容
回到
顶部
顶部
所有评论(0)