vue实现全匹配搜索列表内容

本文实例为大家分享了某视频剪辑软件实现全匹配搜索列表内容的具体代码，供大家参考，具体内容如下

效果：

组件代码：

模板div！-搜索框加按钮埃尔输入占位符='请搜索关键词前缀-图标=' El-icon-search ' v-model=' keyword '/El-input El-button class=' search BTN ' @ click=' search '搜索/El-按钮！-数据- ul li v-for='(项目，索引)在代理列表二' :键='项。id ' p { { item }。userid } }/p p { { item。agentnum } }/p p { { item }。usernam } }/p p { { item。电话} }/p/Li/ul/div/模板脚本导出默认值{ data() { return { keyword: ' '，//搜索关键词agentlisttwo: ' '，//搜索重定义数组代理列表：[{ 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: '韦小宝，电话： '13187455236 '，}，{ userID: '1246 '，agentnum: ' 28 '，username: '小燕子，phone: '13174552223 '，}，{ userID: '1247 '，agentnum: '29 '，username: '花无期，phone: '13174586358 '，}]，} }，//创建完成时已创建(){ //重定义数组这个。agentlistwo=这个。agentlist}，methods: { search(){ //搜索定义变量关键字=this.keywordif(关键字){这个。agentlistwo=这个。代理列表。过滤器(函数(代理列表){返回对象。密钥(代理列表)).一些（函数（键){返回字符串（代理列表[键])。toLowerCase().indexOf(关键字)-1 })})else { this。agentlistwo=这个。agentlist} }、}、}/脚本样式scope edp { width : 300 pxheart : 30px线高： 30pxborder:1px纯黑；文本对齐：中心；} .p1 { color: red}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。