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

<!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>

使用Vue.js搭建简单的表格页面相关推荐

vue引入three.js3维地图_vue-chartjs使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表
简介 vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人.它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大 ...
vue.js的简单自动求和计算
一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss ...
vue.js搭建个人博客
博客2.0更新啦博客2.0 博客地址:mangoya.cn 整体样式基本没有变化,主要变化是前后端重构,之前的1.0版本后端为php,并非博主所开发,这次重构调整了数据结构和所熟悉的语言,采 ...
仿vue.js实现简单模板引擎（2kB）
仿vue.js实现简单模板引擎(2kB) 点击预览 index.html <!DOCTYPE html> <html lang="zh-CN"> <h ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
js创建10万行表格页面显示10万行数据
js创建10万行表格页面显示10万行数据 <html> <head></head> <style> table { border-collap ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...

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

使用Vue.js搭建简单的表格页面相关推荐

最新文章

热门文章