web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

vuejs通过input实现表格/列表模糊搜索代码分析

521 ℃
     

功能需要:页面列表内容太多,不想用接口搜索实时调用,想通过一个input模糊搜索快速查询信息。

1、template

<el-input v-model="search" placeholder="请输入" @input="searchKey"></el-input>
<div>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item.name}}</li>
  </ul>
</div>

2、script代码

export default {
  data() {
    return {
		search:'',
		list:[], //模拟搜索数据
		initdata:[] //接口原始数据
	}
  },
  
  methods: {
	//模糊搜索
    searchKey() {
      this.list = [];
      if (this.search !== "") {
        this.initdata.map(item => {
		  //通过indexOf筛选赋值
          if (item.HospitalName.indexOf(this.search) != -1) {
            this.list.push(item);
          }
        });
      } else {
	    //清空input,拿到原来接口数据
        this.list = this.initdata;
      }
    },
  }
  //input:在input值改变时触发
}

html5如何input禁止文本输入(控制输入)

js如何限制input输出(只允许整数和小数点)

input设置只允许输入汉字

vuejs实现el-input复制粘贴功能

利用input做一个颜色选择器即时渲染

标签: el-input, input, 模糊搜索

上面是“vuejs通过input实现表格/列表模糊搜索代码分析”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2180.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计549个字,预计阅读时长4分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款可免费商用圆体字库——江城圆体
下一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
x 打工人ai神器