vue2.0实现列表数据增加和删除


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码,供大家参考,具体内容如下

css

<style>
 [v-cloak]{
  display: none;
 }
 table{
  width: 800px;
  border-collapse: collapse;
  margin: 20px auto;
 }
 table th,table td{
  background: #0094ff;
  color: white;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  border: 1px solid black;
 }
 table td{
  background: #fff;
  color: red;
 }
</style>

html

<div id="app">
 <input type="text" v-model="id">
 <input type="text" v-model="pname">
 <button @click="addData">添加</button>
 <table>
  <tr>
   <th>编号</th>
   <th>名称</th>
   <th>创建时间</th>
   <th>操作</th>
  </tr>
  <tr v-if="list.length == 0">
   <td colspan="4">当前列表无数据</td>
  </tr>
  <tr v-for="(item,index) in list">
   <td>{{item.id}}</td>
   <td>{{item.pname}}</td>
   <td>{{item.ctime}}</td>
   <td>
    <!-- 方法一 -->
    <!-- <a href="#" @click="delData(index)">删除</a> -->
    <!-- 方法二 -->
    <a href="#" @click="delData(item.id)">删除</a>
   </td>
  </tr>
 </table>
</div>

js

<script src="../dist/vue.js"></script>
<script>
 var vm = new Vue({
  el: '#app',
  data: {
   id: 0,
   pname: '',
   list: [
    {id: 1, pname: '奔驰1', ctime: new Date}
   ]
  },
  methods: {
   addData(){
    // 包装成list要求的对象
    var p = {id: this.id, pname: this.pname, ctime: new Date()}
    this.list.push(p);
    // 清空文本框中的数据
    this.id = 0;
    this.pname = '';
   },
   delData: function(index){
    if(!confirm('是否要删除当前数据')){
     //当用户点击的取消按钮的时候,应该阻断这个方法中的后面代码的继续执行
     return;
    }

    // 方法一
    // this.list.splice(index,1);
    // 方法二:
    // 根据 id 获取要删除的索引,方法一是直接传入删除数组的索引
    var index = this.list.findIndex(function(item){
     return item.id == index;
    });
    this.list.splice(index,1);
   }
  }
 });
</script>

效果图

vue2.0实现列表数据增加和删除

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
vue 实现element-ui中的加载中状态
Nov 11 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
You might like
推荐文章系统(一)
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
如何在php中正确的使用json
2013/08/06 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python中字符串内置函数的用法总结
2018/09/13 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Django REST framework视图的用法
2019/01/16 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python list运算操作代码实例解析
2020/01/20 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python中altair可视化库实例用法
2021/01/26 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
益模软件Java笔试题
2012/03/27 面试题
竞聘演讲稿
2014/04/24 职场文书
大学学生个人总结
2015/02/15 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
JavaScript异步操作中串行和并行
2021/11/20 Javascript