vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据
<template>
<div class="search-box">
<input class="box"
:placeholder="placeholder"
v-model="query"
>
</div>
</template>
<script type="text/ecmascript-6">
import { debounce } from 'common/js/util' export default {
props: {
placeholder: {
type: String,
default: '搜索歌曲、歌手'
}
},
data() {
return {
query: ''
}
},
created() {
this.$watch('query', debounce((newQuery) => {
this.$emit('query', newQuery)
}, 200))
}
}
</script>
export function debounce(func, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据的更多相关文章
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- android设置软键盘搜索键以及监听搜索键点击时发生两次事件的问题解决
在输入框中加入android:imeOptions="actionSearch",调用软键盘时,回车键就会显示搜索二字. 我想在点击搜索时,跳转到下一个页面,但是调用setOnKe ...
- input实时监听控制输入框的输入内容和长度,并进行提示和反馈
一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...
- Android 设置软键盘搜索键以及监听搜索键点击事件
如图所示,有时候为了布局美观,在搜索时没有搜索按钮,而是调用软件盘上的按钮.调用的实现只需要在XML在输入框中加入android:imeOptions="actionSearch" ...
- 利用原生JS实时监听input框输入值
传送门https://www.cnblogs.com/lantinggumo/p/7636715.html 传送门https://www.cnblogs.com/nailc/p/8572226.htm ...
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- LocalDate/LocalDateTime与String的互相转换示例(附DateTimeFormatter详解)
摘自:https://www.jianshu.com/p/b7e72e585a37 LocalDate/LocalDateTime与String的互相转换示例(附DateTimeFormatter详解 ...
- ES6 变量的结构赋值用途(实用技巧)
1.交换变量的值 let x=1; let y=2; [x,y]=[y,x];//x=2,y=1 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里返回,有了解构 ...
- 后盾网lavarel视频项目---模型一对多关联简单实例
后盾网lavarel视频项目---模型一对多关联简单实例 一.总结 一句话总结: 在模型中定义一个方法来设置一对多关联:return $this->hasMany(Video::class); ...
- PLSQL导出表的数据insert语句
“Where clause”可以设置查询条件.设置好文件导出的路径(“Output file”),点击[Export]按钮,就可以导出INSERT语句了. 导出之后使用nodepad打开: 但是如果我 ...
- CSS 解决 a标签去掉下划线 text-decoration: none无效 的解决方案
经过查阅,如果想要去掉a标签的默认效果,就要用text-decoration: none;,但是经过试验发现并不好用,可能是因为你用a标签里的class或id定义的CSS样式,就像这样: <di ...
- 趣谈linux操作系统笔记-内核初始化
内核的启动从入口函数 start_kernel() 开始.在 init/main.c 文件中,start_kernel 相当于内核的main 函数.打开这个函数,你会发现,里面是各种各样初始化函数 X ...
- flutter ListView嵌套高度问题
ListView嵌套时高度无法自适应,需要设置高度才可以显示,设置以下属性可以解决上述问题 shrinkWrap: true, physics: NeverScrollableScrollPhysic ...
- vsftp新建用户及目录时遇到的坑
1.有关vsftp配置及用户权限设置,请参考: http://blog.sina.com.cn/s/blog_3edc5e2e0102vzv8.html 2.需求:公司另一部门要求单独建一目录,来存在 ...
- C++中sort函数使用方法
一.sort函数 1.sort函数包含在头文件为#include<algorithm>的c++标准库中,调用标准库里的排序方法可以实现对数据的排序,但是sort函数是如何实现的,我们不用考 ...
- js脚本实现在该界面直接跳转到一个登录界面并且自动登录
1:首先说明的是自动登录也是需要密码的,这是前一个网页传输过去的 2:这里我使用的是post提交表单的形式 <------------------------------------------ ...