vue怎么实现搜索,vue实现搜索框自动搜索
本文主要详细介绍vue搜索功能的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现搜索功能的具体代码，供大家参考。具体如下。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
/头
身体
div id=应用程序
type= text v-model= keyword placeholder= input keyword /
div class=list
div class= item v-for= item in f ruit :key= item
{{item}}
/div
/div
/div
/body
script src= js/vue . js type= text/JavaScript charset= utf-8 /script
脚本类型=文本/javascript
新Vue({
埃尔： #app ，
data(){
返回{
关键词：，
水果：[
苹果，沙果，海棠，野樱桃李，枇杷，山楂，梨，
悉尼，温柏，玫瑰果，花楸，杏，樱桃，桃，桃，
“油桃”、“蟠桃”、“李子”、“洋李”、“洋李”、“白樱桃”、“黑莓”，
覆盆子，云莓，罗汉州哈尔科夫州莓，白莓，草莓，菠萝莓，橙子，
糖橙，橙子，柠檬，酸橙，葡萄柚，金橘，葡萄柚，香橼，
佛手柑，橘子，黄皮，哈密瓜，香瓜，白兰瓜，仙人球
]
}
},
计算值：{
Fruit(){
//如果关键字为空，则返回所有水果
if(this.keyword==){
归还这个水果；
}否则{
//当Frui中的某个词包含关键字时，保留当前数据。
//filter filter返回true保留，false过滤掉。
return this.fruit.filter(item={
返回item.includes(this.keyword)
})
}
}
}
})
/脚本
/html
结果：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。