vue实现全匹配搜索列表内容


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了vue实现全匹配搜索列表内容的具体代码,供大家参考,具体内容如下

效果:

vue实现全匹配搜索列表内容

组件代码:

<template>
 <div>
 <!-- 搜索框加按钮 -->
<el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input>
<el-button class="searchbtn" @click="search">搜索</el-button>
<!-- 数据 -->
<ul>
 <li v-for="(item,index) in agentlisttwo" :key="item.id" >
   <p>{{item.userID}}</p>
   <p>{{item.agentnum}}</p>
   <p>{{item.username}}</p>
   <p>{{item.phone}}</p>
 </li>
</ul>
 </div>
</template>
 
 <script>
 
 export default {
  data() {
  return {
   keyword:'',//搜索关键词
   agentlisttwo:'',//搜索重定义数组
   agentlist: [{
    userID: "1240",
    agentnum: "22",
    username: "张无忌",
    phone: "13112345678",
   },{
    userID: "1241",
    agentnum: "23",
    username: "林平之",
    phone: "13114785236",
   },{
    userID: "1242",
    agentnum: "24",
    username: "令狐冲",
    phone: "13196584589",
   },{
    userID: "1243",
    agentnum: "25",
    username: "独孤求败",
    phone: "13115963256",
   },{
    userID: "1244",
    agentnum: "26",
    username: "包租婆",
    phone: "13110254523",
   },{
    userID: "1245",
    agentnum: "27",
    username: "韦小宝",
    phone: "13187455236",
   },{
    userID: "1246",
    agentnum: "28",
    username: "小燕子",
    phone: "13174552223",
   },{
    userID: "1247",
    agentnum: "29",
    username: "花无期",
    phone: "13174586358",
   }], 
  }
  },
 
  // 创建完成时
  created() {
   //重定义数组
   this.agentlisttwo = this.agentlist;
  },
 
  methods: {
 
   search(){
    //搜索
    var keyword = this.keyword;
    if (keyword) {
      this.agentlisttwo = this.agentlist.filter(function(agentlist) {
       return Object.keys(agentlist).some(function(key) {
        return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
       })
      })
    }else{
     this.agentlisttwo = this.agentlist;
    }
   },
   
  },
 }
 
</script>
 
<style scoped>
p{
 width: 300px;
 height: 30px;
 line-height: 30px;
 border:1px solid black;
 text-align: center;
}
.p1{
 color: red;
}
</style>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
vue仿ios列表左划删除
Sep 26 #Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 #Javascript
You might like
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Python 含参构造函数实例详解
2017/05/25 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
护理专科毕业生自荐书范文
2014/02/19 职场文书
领导失职检讨书
2014/02/24 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
政工例会汇报材料
2014/08/26 职场文书
防汛工作情况汇报
2014/10/28 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
请假条应该怎么写?
2019/06/24 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL