没有合适的资源?快使用搜索试试~ 我知道了~
vue实现全匹配搜索列表内容
14 下载量 176 浏览量
2020-10-16
07:36:35
上传
评论 1
收藏 35KB PDF 举报
温馨提示
试读
2页
主要为大家详细介绍了vue实现全匹配搜索列表内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论
vue实现全匹配搜索列表内容实现全匹配搜索列表内容
主要为大家详细介绍了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",
}],
}
},
资源评论
weixin_38628362
- 粉丝: 7
- 资源: 899
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功