源码搜藏网

本文实例为大家分享了vue实现实时搜索显示的具体代码，供大家参考，具体内容如下

<template>
//绑定搜索的关键字
<input type="text" class="form-control" placeholder="搜索" v-model="filterInput"/>

<table class="table table-striped">
   <thead>
    <tr>
     <th>姓名</th>
     <th>电话</th>
     <th>邮箱</th>
     <th></th>
    </tr>
   </thead>
   <tbody>
    <!-- 遍历搜索的东西，触发filterBy方法遍历的时候和搜索框内容进行匹配 例如name-->
    <!-- 如果不搜索，遍历的就是所有数据 -->
    <tr v-for="(item,index) in filterBy(customer,filterInput)" :key="index">
     <td>{{item.name}}</td>
     <td>{{item.phone}}</td>
     <td>{{item.email}}</td>
     <!-- 通过对应的id查看详情 拼接id-->
     <!-- 在details中通过携带id发送后台请求数据:to是因为to现在的值是变量要绑定，如果是单纯的字符串就不需要绑定-->
     <td>
      <!-- <router-link class="btn btn-default" :to="'/customer/'+item[index]._id" style="backgroundcolor:blue ">查看详情</router-link> -->
      <!-- <router-link class="btn btn-default" :to="'/customer/'+item._id" style="backgroundcolor:blue " >查看详情</router-link> -->
      <div class="btn btn-default" style="backgroundcolor:blue" @click="handleclick(item)">查看详情</div>
     </td>
    </tr>
   </tbody>
  </table>
 
</template>

<script>
export default {
 name: "customers",
 data() {
  return {
   customer: [],
   filterInput:"",
   childrenmag:''
  };
 },
  methods: {
  // 异步请求数据
  async fetchCustomers() {
   const res = await this.$http.get("/users");
   this.customer = res.data;
  },
  filterBy(customers, inputvalue) {
   // filter方法遍历整个数组
   return customers.filter(customer => {
    // 注意match不能遍里数字，true,false
    return customer.name.match(inputvalue);
   });
  }
  }
</script>

filterBy方法查找对应关键字的那条数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。