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

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

708 ℃
     

功能需求:在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://ipkd.cn/webs_2186.html

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

当前位置: 网站首页 > vuejs
本文共计811个字,预计阅读时长6分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
下一篇: 推荐一款免费开源的跨平台MarkDown编辑器——Mark Text
x 打工人ai神器