el-input和和filter结合实现实时搜索
2024-10-07 03:14:19
<el-input placeholder="请选择日期" clearable prefix-icon="el-icon-search" v-model="input1"></el-input>
<ul class="name-lists">
<li
@click="clickName(item)"
:class="{'active':nameTitle == item.name}"
v-for="item in namelists.filter(data => !input1 || data.name.toLowerCase().includes(input1.toLowerCase()))"
:key="item.id">{{item.name}}</li>
</ul>
data() {
return {
input1: "",
namelists:[{"id":0,"name":"陶凯元"},{"id":1,"name":"张雨绮"},{"id":2,"name":"欧泽高"},{"id":3,"name":"程国祥"},{"id":4,"name":"刘思彤"},{"id":5,"name":"吴仪"},{"id":6,"name":"陈乔恩"},{"id":7,"name":"杨尚昆"},{"id":8,"name":"陈毅"},{"id":9,"name":"王紫娇"},{"id":10,"name":"程潇"},{"id":11,"name":"卜耀东"},{"id":12,"name":"程砚秋"},{"id":13,"name":"张治中"},{"id":14,"name":"甘苦"},{"id":15,"name":"何炅"},{"id":16,"name":"程思远"},{"id":17,"name":"张耀扬"},{"id":18,"name":"甘子玉"},{"id":19,"name":"曹操"},{"id":20,"name":"李俊"},{"id":21,"name":"黄子韬"},{"id":22,"name":"韩金锐"},{"id":23,"name":"阮以伟"},{"id":24,"name":"程思寒"},{"id":25,"name":"陈世炬"},{"id":26,"name":"李光洁"},{"id":27,"name":"徐承栋"},{"id":28,"name":"乔子扬"},{"id":29,"name":"徐才厚"}], }
},
最新文章
- asp.net core 部署 提示DataProtectionServices 错误
- 复制过来的东西也不靠谱,微信公众号第三方平台的API
- noip 2015 提高组
- HDOJ 2089 不要62(打表)
- 理解javascript:void(0);和href=";#";
- HTML----网页基础和基本标签
- (function(root,factory){})(this,function($){}) 一个立即执行的匿名函数自调
- Sqlserver批量生成10w不重复8位数字
- mysql5.7安装(正确安装)实战
- Bootstrap 使用
- <;TCP/IP>;地址解析协议ARP
- httpie的使用
- 转 Kafka、RabbitMQ、RocketMQ等消息中间件的对比 —— 消息发送性能和优势
- 数据库部分(MySql)_1
- idea部署tomcat-404错误
- poj 3278 Catch That Cow(bfs+队列)
- mysql 中int类型字段unsigned和signed的探索
- 使用ThinkPHP实现生成缩略图及显示
- Java类加载器学习笔记
- Codeforces Beta Round #94 div2 D 优先队列