VUE—仿照淘宝历史记录的添加和删除（图文）

VUE—仿照淘宝历史记录的添加和删除

第一步： html

<template><div><div class="list">
<!--      例如淘宝推荐的热门搜索--><h3>列表</h3> <ul><li ref="list" @click="chooseFn(index)" v-for="(item, index) in datalist" :key="index">{{item.title}}</li></ul></div><div class="history">
<!--      点击热门搜索关键字之后在历史记录里添加--><h3>历史记录</h3><button @click="deleteFn">删除</button><ul><li v-for="(item, index) in datahistory" :key="index">{{item}}</li></ul></div></div>
</template>

第二步：热门搜索列表

let datalist = [{title: 'aaa'},{title: 'bbb'},{title: 'ccc'},{title: 'ddd'},{title: 'eee'},{title: 'fff'}]

第三步：

data () {return {datalist, // 热门搜索列表datahistory: [] // 空数组用来存放历史记录}},methods: {chooseFn (index) {if (this.datahistory.indexOf(this.$refs.list[index].innerText) == -1) { //排重，不重复添加历史记录this.datahistory.push(this.$refs.list[index].innerText)} else if (this.datahistory.indexOf(this.$refs.list[index].innerText) != -1) {this.datahistory.splice(this.$refs.list[index].innerText, 1) // 如果重复，删除已有的，重新添加this.datahistory.push(this.$refs.list[index].innerText)}},deleteFn () {this.datahistory = [] // 删除全部历史记录，数组清空即可}

点击热门搜索列表历史记录出现

如果有重复的则删除原先的然后再次添加

点击删除后全部清空

VUE—仿照淘宝历史记录的添加和删除（图文）相关推荐

JQuery和JS怎样实现淘宝购物车的添加和删除？
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
弘辽科技：淘宝超级推荐怎么添加宝贝？效果怎么样？
在进行淘宝店铺推广的时候,不少卖家会利用超级推荐推广工具来进行操作,这对于店铺的流量能有效的得到提高,但是在使用过程中卖家要怎么去添加宝贝了?下面就来介绍下具体操作方法. 1.在商品里新建计划. 第一 ...
弘辽科技：淘宝店铺如何添加客服？在哪添加客服？
对于淘宝店铺来说,淘宝客服是非常重要的岗位,他们每天都需要处理很多的问题,接待很多的消费者,对于商家来说,你知道自己的店铺如何去添加客服吗?接下来的内容进行相关介绍. 一.淘宝店如何添加客服? 商家开 ...
新版的淘宝旺铺2012添加背景音乐教程
特别注意:新版的淘宝旺铺2012对淘宝背景音乐支持不是很好,目前的代码在ie浏览器.360浏览器和搜狗浏览器兼容模式下是可以播放背景音乐,其他谷歌浏览器内核的浏览器是不支持的.即只有使用ie浏览器.3 ...
纯前端vue+bootstrap实现图书管理系统的添加、删除功能
1.纯前端vue+bootstrap实现图书管理系统的添加.删除功能最终效果界面 2.添加效果 3.删除效果 4.前端代码:图书管理系统.html <!DOCTYPE html> < ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
Android 模仿淘宝历史记录，记录存在手机内
首先书写控件: activity_main.xml ps:我自己写的已经和淘宝差不多了,但代码要灵活,所有我吧一些不必要的样式全部去掉了,功能还在,只需自己加一写华丽的样式就行 <?xml ve ...
基于Vue的淘宝首页跳转商品搜索页的最佳实现方式总结（包括v-model组件间使用技巧总结）
今天在练习淘宝项目的时候,做到一个最为常见的功能,就是从主页搜索框搜索内容,点击搜索后能跳转到详细商品页面,同时用户也能在该页面重新搜索,不必返回主页面再搜,大致意思看下图.其实这个功能很多都有,比如 ...

VUE—仿照淘宝历史记录的添加和删除（图文）

VUE—仿照淘宝历史记录的添加和删除

VUE—仿照淘宝历史记录的添加和删除（图文）相关推荐

最新文章

热门文章