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 实现模态对话框 源代码大全
May 02 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
详解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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
浅析PHP的ASCII码转换类
2013/07/05 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php实现可运算的验证码
2015/11/10 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python 处理数据的实例详解
2017/08/10 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
大一期末自我鉴定
2013/12/13 职场文书
情侣吵架检讨书
2014/02/05 职场文书
革命电影观后感
2015/06/18 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript