inputValue(newVal) { this.isClearBtn = newVal ? true : false; if (this.timer) { clearTimeout(this.timer); } if (!this.inputValue) { this.searchData = []; return; } this.timer = setTimeout(() => { const result = []; this.cityList.map(v => { v.list.forEach((item) => { if (/^[a-zA-Z]+$/.test(item.pinyin) && item.pinyin.toLowerCase().includes(this.inputValue.toLowerCase()) || item.name.includes(this.inputValue)) { result.push(item); } }); }) this.searchData = result; if (this.searchData.length === 0) { this.hasNoData = true; } else { this.hasNoData = false; } }, 500); },
时间: 2024-03-03 16:52:16 浏览: 53
Vue.js 3.X开发经验及技巧汇总
这段代码看起来是一个 Vue.js 组件中的 inputValue 方法。当组件中绑定的输入框的值发生变化时,该方法会被调用。首先,它根据输入框的值来判断是否需要显示清除按钮(将 isClearBtn 属性设置为 true 或 false)。然后,它通过一个定时器来实现防抖功能,避免频繁地执行搜索操作。如果输入框的值为空,则会清空搜索结果并返回。否则,它会遍历城市列表,并将符合条件的城市信息加入到一个名为 result 的数组中。符合条件的城市信息指的是城市名称包含输入框的值或城市名称的拼音包含输入框的值(不区分大小写)。最后,它将 result 数组保存到 searchData 属性中,并根据搜索结果的数量来判断是否需要显示“无搜索结果”的提示信息(将 hasNoData 属性设置为 true 或 false)。
阅读全文