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 事件记录使用说明
Oct 20 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
js下载文件并修改文件名
May 08 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
node 版本切换的实现
Feb 02 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
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
js查找节点的方法小结
2015/01/13 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现给数组按片赋值的方法
2015/07/28 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
20招让你的Python飞起来!
2016/09/27 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
详解python实现线程安全的单例模式
2018/03/05 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
关于运动会的广播稿50字
2014/10/17 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js