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


Posted in Vue.js onAugust 14, 2022

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输入模糊查询的三种方式

到此这篇关于vue实现input输入模糊查询的三种方式的文章就介绍到这了,更多相关vue input输入模糊查询内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 #Vue.js
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
Vue2项目中对百度地图的封装使用详解
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
You might like
php内嵌函数用法实例
2015/03/20 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python获取中文字符串长度的方法
2018/11/14 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
网络书店创业计划书
2014/02/07 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
人事聘任通知
2015/04/21 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
签约仪式致辞
2015/07/30 职场文书
机械生产实习心得体会
2016/01/22 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers