您现在的位置是:首页 > Javascript
当前栏目
vue实现input输入模糊查询(三种方式)
2023-03-31 10:39:42 时间
vue实现input输入模糊查询(三种方式)
目录
1 计算属性实现模糊查询
vue 中通过计算属性实现模糊查询,创建 html 文件,代码直接放入即可。
这里自己导入 vue,我是导入本地已经下载好的。
<script src="./lib/vue-2.6.12.js"></script>
演示:
打开默认显示全部
输入关键字模糊查询,名字和年龄都可以
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<table>
<thead>
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in fillist" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
keyWord:'',
list:[
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
]
},
computed:{
fillist(){
// 返回过滤后的数组
return this.list.filter((p)=>{
return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
})
}
}
})
</script>
</body>
</html>
2 watch 监听实现模糊查询
vue 中通过watch 监听实现模糊查询
vue 中通过计算属性实现模糊查询,创建 html 文件,代码直接放入即可。
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<table>
<thead>
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in fillist" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
keyWord:'',
list:[
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
fillist:[]
},
watch:{
keyWord:{
immediate:true,//在框的值还没变化时执行如下函数显示出所有的情况
handler(val){
this.fillist = this.list.filter((p)=>{
return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
})
}
}
}
})
</script>
</body>
</html>
演示和计算属性的一样。。
3 通过按钮点击实现模糊查询
这里我是在 vue-cli 中完成的,完整代码如下。
vue.app 代码:
<template>
<div id="app">
<!-- 输入框 -->
<input type="text" v-model="value" placeholder="请输入姓名/年龄" />
<!-- 查询按钮 -->
<button @click="search">查询</button>
<!-- 给table表格赋值 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in tableData" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
tableData: [
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
//表格B用原表格的数据
tableDataB: [
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
};
},
methods: {
// 点击搜索 支持模糊查询
search() {
//表格用原表格的数据 即 用于搜索的总数据
this.tableData = this.tableDataB;
//获取到查询的值,并使用toLowerCase():把字符串转换成小写,让模糊查询更加清晰
let _search = this.value.toLowerCase();
let newListData = []; // 用于存放搜索出来数据的新数组
if (_search) {
//filter 过滤数组
this.tableData.filter((item) => {
// newListData中 没有查询的内容,就添加到newListData中
if (
item.name.toLowerCase().indexOf(_search) !== -1 ||
item.age.toLowerCase().indexOf(_search) !== -1
) {
newListData.push(item);
}
});
}
//查询后的表格 赋值过滤后的数据
this.tableData = newListData;
},
},
}
</script>
<style></style>
main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
整体结构:
演示:
输入关键字,点击查询:
大小写模糊查询:
写在最后
✨个人笔记博客✨
个人博客,记录前端学习笔记,欢迎收藏或者提意见。
相关文章
- 微信安卓版 8.0.14 内测版发布,附开发者更新内容
- 从三个方面,帮你快速掌握「设计系统」的完整框架
- 下个月就来!谷歌安卓12正式版即将推送:国内用户不用等了!
- 有哪些组件值得学习?我梳理了八个大厂的设计组件!
- 华为鸿蒙继续开放:方舟JS运行时正式开源
- iOS文本的多语言适配和实践
- 12306网站进行适老化改造:验证码终于优化、界面简化
- 良心的好功能!12306网站爱心模式详细体验
- 源码进阶之lifecycle组件原理分析
- 第一波!设计师必须注意的 12 个 UI 设计小技巧
- UI设计师跳槽前,需要考虑的八个问题!
- 2021年React的状态管理之争:Hooks、Redux 和 Recoil
- 5000字干货!超全面的B端设计规范总结
- iOS 无侵入埋点组件总结
- 作为一名 34 岁的设计师,我是如何摆脱焦虑的?
- Lyft设计总监:移动端响应式设计的高效方法
- 快速提升 UI 设计效果的 6 个小技巧
- H5 移动端调试全攻略
- 如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!
- 帮 UI 设计师极大提升效率的10款 Figma 插件