JavaScript
搜索
分类

vue实现input输入模糊查询的三种方式

作者：星月前端 时间：2024-05-08 10:42:12　

1 计算属性实现模糊查询

vue 中通过计算属性实现模糊查询,创建 html 文件，代码直接放入即可。

这里自己导入 vue，我是导入本地已经下载好的。

<script src="./lib/vue-2.6.12.js"></script>

演示：

打开默认显示全部

vue实现input输入模糊查询的三种方式

输入关键字模糊查询，名字和年龄都可以

vue实现input输入模糊查询的三种方式

完整代码如下：

<!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')

整体结构：

vue实现input输入模糊查询的三种方式

演示：

输入关键字，点击查询：

vue实现input输入模糊查询的三种方式

大小写模糊查询：

vue实现input输入模糊查询的三种方式

来源：https://blog.csdn.net/qq_61950936/article/details/126311437

标签：vue,input输入,模糊查询
0
投稿

猜你喜欢

  • .Net行为型设计模式之迭代器模式（Iterator）

    2024-06-05 09:27:47

  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    2023-07-02 16:28:13

  • python 判断自定义对象类型

    2021-08-29 22:09:37

  • python实现求两个字符串的最长公共子串方法

    2021-08-02 21:14:08

  • JavaScript使用canvas实现flappy bird全流程详解

    2024-04-18 09:34:49

  • Vue内部渲染视图的方法

    2024-04-28 09:19:57

  • 详解python中文编码问题

    2023-10-17 12:09:08

  • 基于Python实现视频转字符画动漫小工具

    2022-12-20 04:33:54

  • python unicodedata模块用法

    2021-04-05 20:53:55

  • 解决jupyter notebook启动后没有token的坑

    2023-03-18 23:46:37

  • Selenium元素的常用操作方法分析

    2021-09-21 14:51:54

  • 如何使用MyBatis Plus实现数据库curd操作

    2024-01-21 17:37:13

  • Python 3中print函数的使用方法总结

    2021-12-21 00:37:18

  • 一个css垂直水平居中布局，css效果

    2008-11-03 11:40:00

  • 详解mysql 组合查询

    2024-01-20 10:43:06

  • Pandas如何对Categorical类型字段数据统计实战案例

    2023-03-01 20:02:26

  • 详解Go语言中的Slice链式操作

    2024-05-22 10:29:05

  • 将字符实体引用转换成 Unicode 字符

    2011-07-01 12:31:51

  • Python3 中文文件读写方法

    2021-07-14 20:02:39

  • python 自动提交和抓取网页

    2022-11-16 17:47:01
    • asp之家 网络编程 m.aspxhome.com