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 相关文章推荐
javascript深入理解js闭包
Jul 03 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
基于angular实现树形二级表格
Oct 16 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
重置版宣传动画
2020/04/09 魔兽争霸
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现机器学习之元线性回归
2018/09/06 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
数据库连接池的工作原理
2012/09/26 面试题
求职者简历中的自我评价
2013/10/20 职场文书
函授本科自我鉴定
2013/11/03 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
早会开场白台词大全
2015/06/01 职场文书
人民调解协议书
2016/03/21 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis