el-input输入框关键字筛选列表数据

功能需求：在el-input输入关键字，返回查询列表并显示出来。

1.template代码

<template>
  <div>
    <el-input type="text" v-model="search"></el-input>
    <ul>
      <li v-for="(item,index) in listData">
         <span>{{item.name}}</span>
         <span>{{item.msg}}</span>
      </li>
    </ul>
  </div>
</template>

2.js代码

export default {
  data () {
    return {
      search:'',
      list:[
        {name:'张三',msg:'我是张三'},
        {name:'李四',msg:'我是李四'},
        {name:'王五',msg:'我是王五'},
        {name:'马六',msg:'我是马六'},
        {name:'田七',msg:'我是田七'},
      ]
    }
  },
  
  computed: {
    //调用listData，list只是过滤用
    listData: function() {
      var _search = this.search;
      if (_search) {
        //不区分大小写处理
        var reg = new RegExp(_search, 'ig')
        //es6 filter过滤匹配，有则返回当前，无则返回所有
        return this.list.filter(function(e) {
          //匹配所有字段
          return Object.keys(e).some(function(key) {
            return e[key].match(reg);
          })
          //匹配某个字段
          //  return e.name.match(reg);
        })
      };
      return this.list;
    }
  },
}

进入前端入门建站教程官网入口

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

v-for循环生成el-input带rules验证

v-for批量生成el-input并动态绑定v-model（实时获取input输入值和索引）

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

el-select/el-input清空方法调用

标签： el-input, 筛选数据

上面是“el-input输入框关键字筛选列表数据”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2186.html

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