vue手机端项目-搜索历史

最新推荐文章于 2023-10-11 13:56:37 发布
最新推荐文章于 2023-10-11 13:56:37 发布
阅读量713 收藏
点赞数
分类专栏： 项目 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq994849611/article/details/123489405
版权

在search/index.vue中 data添加一个数据用来存储历史记录

在触发搜索的时候，记录历史记录

 

展示历史记录

父组件search/index.vue传递数据

子组件search-history.vue接收数据 

 

渲染数据

 

 删除历史记录

处理删除相关元素的展示状态，在 data 中添加一个数据用来控制删除相关元素的显示状态

绑定

 

处理删除操作

 

 

父组件search/index.vue监听自定义事件，执行搜索操作和删除全部操作

 

数据持久化

在search/index.vue中利用 watch 监视统一存储数据

 

 

初始化的时候从本地存储获取数据

 

 

 

是我九街呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-props实例属性
jiaowolaoliu111的博客
08-02 437
首先是div里是一个my-parent标签，然后div外面是一个id为parent的temlate模板，接下来又是一个div，里面首先是一个h3标签，然后是一个inout搜索框，下来是一个my-child模板，id为child的template里有一个ul标签，ul里是li标签。然后我们看一下逻辑，有两个自定义标签一个是my-child，用的模板是child，一个是my-parent，用的模板是parent，在data里面用到一个数组content，里面的数据一会需要进行过滤。需要在watch里进行监听，.
Vue移动端各种机型判断
weixin_44590591的博客
12-16 5863
#Vue判断是否为移动端/IOS/当前设备是否为手机 Vue移动端各种机型判断 判断当前设备是否为移动端
基于vue的手机搜索框（html5和css3）
最新发布
qq_62185873的博客
10-11 211
点击搜索华为Mate60会跳转到相对应的商品页面。代码在这里就不展示了，放在下面的链接里，需要的自取！
Vue中如何进行表单手机号验证与手机号归属地查询
stormjun的博客
10-07 866
在Vue.js应用程序中实现表单手机号验证和手机号归属地查询是一个非常有用的功能，它可以帮助您提高用户输入的数据质量，并获取有关手机号的附加信息。希望本文对您有所帮助，让您更好地理解如何在Vue中实现这些功能。
vue搜索、历史记录功能简单实现
热门推荐
sunluyi的博客
03-19 1万+
实现的功能 1.点击搜索，把搜索的值存入本地记录，并展示 2.搜索相同的值，要删除旧数据，把新数据放进数组首位 3.清空历史记录 <div class="srarch_main"> <img src="@img/icon/4.png" alt="删除历史记录" class="del" @click="empty"> <div class="title">历史...
前后端分离vue前端项目---员工管理系统（vue+springboot+redis）
06-28
vue前端项目---员工管理系统 前端技术栈：ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈：SpringBoot、MyBatis、Spring Security、Jwt 系统划分了超级管理员、HR人事、经理与普通员工四大角色...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue 翻页组件vue-flip-page效果
10-15
在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能以及如何在项目中集成。 首先，要使用Vue Flip Page，你需要通过npm来安装它： ```bash npm install vue-flip-page ``` 安装完成后，在需要使用该组件的...
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
vue3-composition-admin:v基于vue3的管理端模板（Vue3 TS Vuex4 element-plus vue-i18n-next composition-api）vue3-admin vue3-ts-admin
03-20
vue3-composition-admin是一个管理端模板解决方案，它是基于vue3，ts和element-plus，项目都是以composition api风格编写的。 简介 项目的基础版本出自自于源于花裤衩大佬的vue-element-admin。 版本： vue2 + js...
Vue 实现输入框新增搜索历史记录功能
10-16
主要介绍了Vue 输入框新增搜索历史记录功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
搜索显示历史记录
10-30
实现EditTex输入过程中显示历史记录，方便快捷
vue 搜索框带历史记录
weixin_43337481的博客
06-09 491
【代码】vue 搜索框带历史记录。
vue前端实现搜索功能
MengLi的博客
07-16 1万+
代码如下 <template> <div class="safetyInfo"> <nut-searchbar placeText="请输入详细地址/门牌号/" v-model="search" @input="submitFun" ...
vue实现搜索框历史记录功能,本地储存,最新点击排在最前面
wz990223的博客
07-21 1379
<div class="head_top"> <div class="left"> <img src="../fangdajing.png" /> <input placeholder="请输入搜索关键字" ref="getValue" v-model="inputText" maxlength="50" @cli..
vue 移动端搜索功能（带历史搜索记录）
huhuhuja
06-16 1965
实现效果如图： 实现的功能: 1.点击搜索，把搜索的值存入本地记录，并展示 2.搜索相同的值，要删除旧数据，把新数据放进数组首位 3.清空历史记录 html代码： <div class="searchinp"> <span @click="back" class="totrain"></span> <div class="input_box"> <img class="btn_img" src="...
【VUE项目实战】26、实现用户信息搜索功能
程序猿之洞
12-18 7672
接上篇《25、实现用户状态的修改》 上一篇我们实现了用户状态的修改效果，本篇我们来实现用户的搜索功能。 我们要实现，当用户在搜索框中输入用户的姓名后，点击搜索按钮，可以从数据库中查询到相应的用户信息： 首先我们需要将文本框和我们data中的数据进行双向绑定，绑定完毕之后在点击放大镜按钮的时候，调用获取用户列表的函数，进行数据的查询即可。 首先我们来做数据的双向绑定。这里我们在el-input中使用v-model绑定用户查询对象的queryinfo的query属性，然后找到查询按钮，使用click绑定查
vue中移动端开发 实现点击键盘上的搜索进行查询
weixin_43703816的博客
08-11 648
在开发移动端中，会遇到一个需求，点击手机键盘上的搜索，实现查询功能 其实想要实现这个功能，很简单。 在输入框中，或者下拉框中 添加一个 @keyup.13="toSearch" 其中toSearch是一个方法，你查询的一个函数 toSearch(){//改变时触发搜索 console.log(111) this.dataList=[] ...
Vue 使用Cookies实现商品搜索历史记录
LONGYog的博客
04-25 589
Vue 使用Cookies实现商品搜索历史记录 需求 用户搜索商品，我们需要把用户输入的词语存储到搜索历史并展示 tip：存储不知道存储到哪里，所以我想到了用cookies存储到客户端 1.前言 vue使用cookie，需先安装cookies插件，我这里使用的是vue-cookies插件 1.安装 vue-cookies npm install vue-cookies --save 2.引入 vue-cookies（找到main.js,输入下面的代码，我们就可以开始使用啦。） import Vue
vue2项目vue-quill-editor使用
08-09
要在Vue2项目中使用vue-quill-editor，你可以按照以下步骤进行操作： 1. 在项目中安装vue-quill-editor库。你可以使用npm或者yarn来安装，具体命令如下： ``` npm install vue-quill-editor 或 yarn add vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值