• vue实现input输入模糊查询(三种方式)

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

    目录

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

    1 计算属性实现模糊查询

    演示：

    2 watch 监听实现模糊查询

    3 通过按钮点击实现模糊查询

    演示：

    1 计算属性实现模糊查询

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

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

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

    演示：

    打开默认显示全部

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

    完整代码如下：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.   head>
    8.   <body>
    9.     <div id="app">
    10.       <h2>人员列表h2>
    11.       <input type="text" placeholder="请输入名字" v-model="keyWord">
    12.       <table>
    13.         <thead>
    14.           <tr>
    15.             <td>名字td>
    16.             <td>年龄td>
    17.           tr>
    18.         thead>
    19.         <tbody>
    20.           <tr v-for="(item,i) in fillist" :key="i">
    21.             <td>{{ item.name }}td>
    22.             <td>{{ item.age }}td>
    23.           tr>
    24.         tbody>
    25.       table>
    26.     div>
    27. ​
    28.     <script src="./lib/vue-2.6.12.js">script>
    29. ​
    30.     <script>
    31.       const vm = new Vue({
    32.         el: '#app',
    33.         data: {
    34.           keyWord:'',
    35.           list:[
    36.             { name: '张三', age: '18' },
    37.             { name: '张四', age: '17' },
    38.             { name: '张五', age: '17' },
    39.             { name: '老六', age: '18' },
    40.             { name: '老八', age: '18' },
    41.             { name: '小三', age: '19' },
    42.             { name: 'Xingyue', age: '18' },
    43.           ]
    44.         },
    45.         computed:{
    46.           fillist(){
    47.             // 返回过滤后的数组
    48.             return this.list.filter((p)=>{
    49.               return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
    50.             })
    51.           }
    52.         }
    53.       })
    54.     script>
    55.   body>
    56. html>

    2 watch 监听实现模糊查询

    vue 中通过watch 监听实现模糊查询

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

    完整代码如下：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>Documenttitle>
    7.   head>
    8.   <body>
    9.     <div id="app">
    10.       <h2>人员列表h2>
    11.       <input type="text" placeholder="请输入名字" v-model="keyWord">
    12.       <table>
    13.         <thead>
    14.           <tr>
    15.             <td>名字td>
    16.             <td>年龄td>
    17.           tr>
    18.         thead>
    19.         <tbody>
    20.           <tr v-for="(item,i) in fillist" :key="i">
    21.             <td>{{ item.name }}td>
    22.             <td>{{ item.age }}td>
    23.           tr>
    24.         tbody>
    25.       table>
    26.     div>
    27. ​
    28.     <script src="./lib/vue-2.6.12.js">script>
    29. ​
    30.     <script>
    31.       const vm = new Vue({
    32.         el: '#app',
    33.         data: {
    34.           keyWord:'',
    35.           list:[
    36.             { name: '张三', age: '18' },
    37.             { name: '张四', age: '17' },
    38.             { name: '张五', age: '17' },
    39.             { name: '老六', age: '18' },
    40.             { name: '老八', age: '18' },
    41.             { name: '小三', age: '19' },
    42.             { name: 'Xingyue', age: '18' },
    43.           ],
    44.           fillist:[]
    45.         },
    46.         watch:{
    47.           keyWord:{
    48.             immediate:true,//在框的值还没变化时执行如下函数显示出所有的情况
    49.             handler(val){
    50.               this.fillist = this.list.filter((p)=>{
    51.                 return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
    52.               })
    53.             }
    54.           }
    55.         }
    56.       })
    57.     script>
    58.   body>
    59. html>
    演示和计算属性的一样。。

    3 通过按钮点击实现模糊查询

    这里我是在 vue-cli 中完成的，完整代码如下。

    vue.app 代码：

    1. <template>
    2.   <div id="app">
    3.     
    4.     <input type="text" v-model="value" placeholder="请输入姓名/年龄" />
    5.     
    6.     <button @click="search">查询button>
    7.     
    8. ​
    9.     <table>
    10.       <thead>
    11.         <tr>
    12.           <td>姓名td>
    13.           <td>年龄td>
    14.         tr>
    15.       thead>
    16.       <tbody>
    17.         <tr v-for="(item,i) in tableData" :key="i">
    18.           <td>{{ item.name }}td>
    19.           <td>{{ item.age }}td>
    20.         tr>
    21.       tbody>
    22.     table>
    23.   div>
    24. template>
    25. ​
    26. <script>
    27. export default {
    28.   data() {
    29.     return {
    30.       value: '',
    31.       tableData: [
    32.         { name: '张三', age: '18' },
    33.         { name: '张四', age: '17' },
    34.         { name: '张五', age: '17' },
    35.         { name: '老六', age: '18' },
    36.         { name: '老八', age: '18' },
    37.         { name: '小三', age: '19' },
    38.         { name: 'Xingyue', age: '18' },
    39.       ],
    40.       //表格B用原表格的数据
    41.       tableDataB: [
    42.         { name: '张三', age: '18' },
    43.         { name: '张四', age: '17' },
    44.         { name: '张五', age: '17' },
    45.         { name: '老六', age: '18' },
    46.         { name: '老八', age: '18' },
    47.         { name: '小三', age: '19' },
    48.         { name: 'Xingyue', age: '18' },
    49.       ],
    50.     };
    51.   },
    52.   methods: {
    53.     // 点击搜索 支持模糊查询
    54.     search() {
    55.       //表格用原表格的数据 即 用于搜索的总数据
    56.       this.tableData = this.tableDataB;
    57.       //获取到查询的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
    58.       let _search = this.value.toLowerCase();
    59.       let newListData = []; // 用于存放搜索出来数据的新数组
    60.       if (_search) {
    61.         //filter 过滤数组
    62.         this.tableData.filter((item) => {
    63.           // newListData中 没有查询的内容，就添加到newListData中
    64.           if (
    65.             item.name.toLowerCase().indexOf(_search) !== -1 ||
    66.             item.age.toLowerCase().indexOf(_search) !== -1
    67.           ) {
    68.             newListData.push(item);
    69.           }
    70.         });
    71.       }
    72.       //查询后的表格 赋值过滤后的数据
    73.       this.tableData = newListData;
    74.     },
    75.   },
    76. }
    77. script>
    78. ​
    79. <style>style>

    main.js 代码如下：

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. ​
    4. Vue.config.productionTip = false
    5. ​
    6. new Vue({
    7.   render: h => h(App),
    8. }).$mount('#app')
    ​

    整体结构：

    演示：

    输入关键字，点击查询：

    大小写模糊查询：

    星月前端博客https://xingyue.vercel.app/

    个人博客，记录前端学习笔记，欢迎收藏或者提意见。

  • 相关阅读:
    2022年上半年系统集成项目管理工程师下午真题及答案解析
    不要再用if-else
    PostgreSQL对已有表增加自增序列
    一键部署区块链背后的秘密（下）
    EMC-浪涌防护及退耦设计
    NAS HomeAssistant
    Vue的暗黑模式
    整合生成型AI战略：从宏观思维到小步实践
    如何解压 GZ 文件
    NEON优化：性能优化常见问题QA
  • 原文地址：https://blog.csdn.net/qq_61950936/article/details/126311437