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;
    }
  },
}

以上是编程学习网小编为您介绍的“el-input输入框关键字筛选列表数据”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。