使用Vue.js搭建简单的表格页面

来源：互联网发布：网络监控摄像头客户端编辑：程序博客网时间：2024/06/05 14:38
<!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>
阅读全文
0 0