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 相关文章推荐
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
nodejs基础知识
2017/02/03 NodeJs
socket.io实现在线群聊功能
2017/04/07 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
JavaScript错误处理操作实例详解
2019/01/04 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python中的下划线详解
2015/06/24 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python global和nonlocal用法解析
2020/02/03 Python
python 获取计算机的网卡信息
2021/02/18 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
英文版餐饮业求职信
2013/10/18 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
社区八一活动方案
2014/02/03 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
MySQL优化及索引解析
2022/03/17 MySQL