vue增删改查的简单操作


Posted in Javascript onJuly 15, 2017

本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下

vue增删改查的简单操作

我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

list: [
  {
    username: 'aaaaa',
    email: '123@qq.com',
    sex: '男',
    province: '北京市',
    hobby: ['篮球', '读书', '编程']
  },
  {
    username: 'bbbbb',
    email: 'bbbbbbb@163.com',
    sex: '女',
    province: '河北省',
    hobby: ['弹琴', '读书', '插画']
  }
  // ...
]

这里面的表单有:文本输入框,单选按钮,select选择框,复选框等。

1. 展示数据

我们的数据都放在数组list中,但是这里并不直接对list对循环输出,而是先把list中的数据给一个数组slist,对slist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤,数组list一直保存着原始数据(包括新增、修改后或已删除后),而数组slist只负责展示。

在vue中提供一个setSlist方法,将需要展示的数据给了数组slist:

// 获取需要渲染到页面中的数据
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

然后在html中使用v-for把slist数组渲染出来:

<tr v-cloak v-for="(item, index) of slist">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
</tr>

在操作这一栏中,给修改和删除操作绑定上事件。

2. 增加和删除功能 

把增加功能和删除合并到一起,是这两个功能相对来说都比较简单。

增加用户时使用push方法,把用户的信息添加到list数组的最后:

this.list.push({
  username: 'ffff',
  email: 'fffffff@163.com',
  sex: '女',
  province: '河南省',
  hobby: ['弹琴', '插画']
});

这样就能添加一位ffff的用户了。

删除用户时,通过splice(index, 1),可以删除index位置的数据,页面上的数据自动就会更新。

3. 修改功能

假设我们弹层里的数据是selectedlist,那么每次修改时,把index位置的数据给了selectedlist,然后在弹层中修改selectedlist。我们也能看到修改数据的类型: 文本框(用户名,邮箱),单选按钮(性别),select选择框(所在省份),多选框(爱好),这里我们主要练习的是表单处理(https://cn.vuejs.org/v2/guide/forms.html)。弹层是否显示用变量isActive来控制:

// 修改数据
modifyData(index) {
  this.selected = index; // 修改的位置
  this.selectedlist = this.list[index];
  this.isActive = true;
}

有没有发现一个问题,当修改弹层中的信息时,表格中的数据也同步更新了。可是我们本身是希望当点击保存按钮时,才把弹层中的数据保存到表格里。问题的根源就出在这里:

this.selectedlist = this.list[index];

因为list[index]是个Object类型的数据,若使用=赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),selectedlist与list[index]使用相同的数据地址,互相引起数据值的变化。因此这里我们需要进行深度拷贝:

this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串,然后再转换

当用户修改数据后,selectedlist就会发生变化,点击保存按钮时,将数据重新保存到index位置:

/*
 this.list 数据数组
 this.selected 刚才修改的位置
 this.selectedlist 需要保存的数据
*/
Vue.set(this.list, this.selected, this.selectedlist);

4. 查询功能

在第1小节中我们已经说过,在页面表格中展示的是slist中的数据,就是为了方便执行查询操作:

// 获取需要渲染到页面中的数据
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

每次根据某些条件将过滤后的数据赋值给slist数组,展示出查询后的数据。这里我们的查询实现了两个小功能:

1、用户在输入某个字符后,自动在输入框下方用列表展示出用户可能要查询的词语(如用户名等)
2、同步更新表格中的数据

这里我们通过用户名和邮箱进行查询,因此在过滤数据时,需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个input事件,同时用datalist展示用户可能要查询的词语:

<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
  <option v-for="item in searchlist" :value="item"></option>
</datalist>

search功能的实现,searchlist为在输入框下方展示的可能要搜索的词语,ss数组则保存过滤后的数据,当循环完毕后,设置调用setSlist方法修改slist数组:

每当用户输入或者删除一个字符时都会调用search方法,执行查询操作,当用点击展示词语列表时,也会调用search方法。

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

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
JS函数重载的解决方案
May 13 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 #Javascript
Javascript实现基本运算器
Jul 15 #Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
Javascript实现时间倒计时效果
Jul 15 #Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
You might like
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
jquery 插件开发备注
2010/08/27 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
javascript的push使用指南
2014/12/05 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
大学生毕业自我鉴定范文
2013/11/03 职场文书
电钳专业个人求职信
2014/01/04 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
CentOS安装Nginx并部署vue
2022/04/12 Servers
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python