本文实例为大家分享了Vue实现实时搜索显示的具体代码,供大家参考,具体内容如下 <template> //绑定搜索的关键字 <input type="text"
本文实例为大家分享了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方法查找对应关键字的那条数据。
--结束END--
本文标题: vue实现实时搜索显示功能
本文链接: https://www.lsjlt.com/news/146335.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0