Vue.js实现的表格增加删除demo示例


Posted in Javascript onMay 22, 2018

本文实例讲述了Vue.js实现的表格增加删除demo。分享给大家供大家参考,具体如下:

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun,得到如下所示的运行效果:

Vue.js实现的表格增加删除demo示例

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue.js小demo</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="external nofollow" >
 <style>
  label{float:left;line-height: 34px;}
  .panel-body{
    margin:30px auto;
  }
 </style>
</head>
<body>
<!-- 这是我们的view -->
<div class="col-md-6">
  <div class="panel panel-default" id="app" >
  <div class="panel-body">
      <div class="form-group">
        <label class="col-md-2 control-label">Name:</label>
        <input type="text" class="col-md-9 form-control" v-model="newPerson.name"/>
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">Age:</label>
        <input type="text" class="col-md-9 form-control" v-model="newPerson.age">
      </div>
      <div class="form-group">
        <label class="col-md-2 control-label">Sex:</label>
        <select class="col-md-9 form-control" v-model="newPerson.sex">
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
      <div class="form-group">
        <label class="col-md-8"></label>
        <button class="col-md-3" @click="createPerson">Create</button>
      </div>
    </div>
  <div class="panel-body">
    <table class="table text-center">
        <thead>
          <tr >
            <th class="text-center">Name</th>
            <th class="text-center">Age</th>
            <th class="text-center">Sex</th>
            <th class="text-center">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.sex }}</td>
            <td><button v-on:click="delPerson($index)">Delete</button></td>
          </tr>
        </tbody>
      </table>
    </div>
 </div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
//创建一个Vue实例或"ViewModel",它连接view与model
var vm = new Vue({
  el: '#app',
  data: {
    newPerson: {
      name: '',
      age: '',
      sex: 'Male'
    },
    people: [{
      name: 'Jack',
      age: 30,
      sex: 'Male'
    }, {
      name: 'Bill',
      age: 26,
      sex: 'Male'
    }, {
      name: 'Tracy',
      age: 22,
      sex: 'Female'
    }, {
      name: 'Chris',
      age: 36,
      sex: 'Male'
    }]
  },
  methods:{
    createPerson: function(){
      this.people.push(this.newPerson);
      // 添加完newPerson对象后,重置newPerson对象
      this.newPerson = {name: '', age: '', sex: 'Male'}
    },
    delPerson: function(index){
      // 删一个数组元素
      this.people.splice(index,1);
    }
  }
});
</script>
</html>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
潜说js对象和数组
May 25 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
js星星评分效果
Jul 24 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 #Javascript
VUE2.0中Jsonp的使用方法
May 22 #Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 #Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
You might like
PHP数据缓存技术
2007/02/14 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Python中的yield浅析
2014/06/16 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
代码分析Python地图坐标转换
2018/02/08 Python
python装饰器深入学习
2018/04/06 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
信息专业本科生个人的自我评价
2013/10/28 职场文书
大学生创业策划书
2014/02/02 职场文书
创业计划书模版
2014/02/05 职场文书
广告语设计及教案
2014/03/21 职场文书
我爱我家教学反思
2014/05/01 职场文书
岗位职责说明书
2014/05/07 职场文书
药剂专业求职信
2014/06/20 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2014年个人委托书范本
2014/10/13 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
施工员岗位职责范本
2015/04/11 职场文书
法定代表人资格证明书
2015/06/18 职场文书
律师催款函范文
2015/06/24 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js