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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript this使用方法图解
Feb 04 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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 数组的一个悲剧?
2011/05/11 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
python爬虫基础之urllib的使用
2020/12/31 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python入门之基础语法详解
2021/05/11 Python