上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数; 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子;其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后 在Vue.js中实现输入框的模糊查询功能,通常会结合使用`oninput`事件和节流函数,以提高用户体验和性能。节流函数的主要目的是在高频事件触发时限制执行频率,避免频繁调用导致资源浪费或性能下降。例如,`onresize`、`onmousemove`、`onscroll`和`oninput`等事件都适合使用节流。 模糊查询的基本原理是在用户输入时实时获取输入框的值,并与后台数据进行匹配,显示出匹配的搜索结果。这在很多搜索场景中非常常见,如百度的搜索框。在Vue中,可以使用`v-model`绑定输入框的值,并通过`@keyup`或`@input`事件监听用户的输入变化。 以下是一个简单的Vue实现模糊查询的示例代码: ```html <div id="app"> <input type="text" placeholder="请输入id进行查询" v-model="input_value" @keyup="throttle" ref="input"/> <ul v-show="state"> <li v-for="(item, index) in list" :key="index"> <span>{{item.id}}</span> <span>{{item.name}}</span> <span>{{item.time}}</span> </li> </ul> </div> ``` 在这个例子中,我们创建了一个输入框,绑定了`input_value`变量,并在用户按键时触发`throttle`方法。`v-show`用于控制列表的显示隐藏,根据`input_value`的长度来决定是否显示。 在JavaScript逻辑层,我们需要定义Vue实例并设置数据和方法: ```javascript new Vue({ el: "#app", data: { input_value: "", state: false, dataList: [ { id: "1001", name: "哈哈", time: "20170207" }, // 其他数据项... ], list: [] }, methods: { throttle() { var i = 0; console.log(i++); this.list = []; this.input_value = this.$refs.input.value; if (this.input_value.length > 0) { this.state = true; } else { this.state = false; } this.dataList.forEach(msg => { if (msg.id.indexOf(this.input_value) !== -1 || msg.name.indexOf(this.input_value) !== -1) { this.list.push(msg); } }); } } }); ``` 在这里,`throttle`方法实现了模糊查询的功能,首先清空`list`,获取输入框的值,然后检查输入值是否存在于`dataList`中的`id`或`name`字段。如果存在,就将匹配的项添加到`list`中显示。由于`throttle`方法会频繁调用,因此需要对其进行优化,避免每输入一个字符就触发一次查询。 这就是节流函数的用武之地。可以使用第三方库如lodash的`_.throttle`,或者自定义节流函数,确保在一定时间内只执行一次,例如500毫秒内只执行一次`throttle`方法。这样可以防止在用户快速输入时连续多次发送请求,减轻服务器负担,提升用户体验。 总结来说,Vue实现输入框的模糊查询结合节流函数的应用,主要涉及以下几个知识点: 1. Vue的`v-model`和`@keyup`事件监听输入。 2. 节流函数的使用,控制高频事件的执行频率。 3. 数据绑定和响应式更新,实时显示搜索结果。 4. 遍历和比较数据,找出与输入值匹配的项。 5. 使用`v-show`控制组件的显示和隐藏。 通过这种方式,我们可以实现一个高效且用户体验良好的模糊查询功能。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/release/download_crawler_static/13587931/bg1.jpg)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 6
- 资源: 960
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)