富贵资源网 Design By www.hznty.com

本文实例为大家分享了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>

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。