vue中如何实现增删改查操作 |
您所在的位置:网站首页 › vuex增删改查列表 › vue中如何实现增删改查操作 |
vue中怎么实现增删改查操作
本文讲解"vue中如何实现增删改查操作",用于解决相关问题。 具体内容如下 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '[email protected]', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: '[email protected]', 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数组渲染出来: 修改 | 删除在操作这一栏中,给修改和删除操作绑定上事件。 2. 增加和删除功能 把增加功能和删除合并到一起,是这两个功能相对来说都比较简单。 增加用户时使用push方法,把用户的信息添加到list数组的最后: this.list.push({ username: 'ffff', email: '[email protected]', 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展示用户可能要查询的词语: search功能的实现,searchlist为在输入框下方展示的可能要搜索的词语,ss数组则保存过滤后的数据,当循环完毕后,设置调用setSlist方法修改slist数组: 每当用户输入或者删除一个字符时都会调用search方法,执行查询操作,当用点击展示词语列表时,也会调用search方法。 关于 "vue中如何实现增删改查操作" 就介绍到此。希望多多支持编程宝库。 下一节:Vue怎么应用部署到服务器Vue 编程技术Vue如何应用部署到服务器:本文讲解"Vue怎么应用部署到服务器",用于解决相关问题。如何打包基于Vue-Cli,通过npm run build来进行打包的操作如何部署将打包出来的资源,基于Vue-Cli的一般是dist目录下有static ... |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |