el-input和和filter结合实现实时搜索

 <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":"徐才厚"}],
                
            }
        },

 

转载于:https://www.cnblogs.com/zmdblog/p/11232189.html