溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹vue如何實現搜索小功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="keyword" placeholder="輸入關鍵字" />
<div class="list">
<div class="item" v-for="item in fFruit" :key="item">
{{item}}
</div>
</div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
keyword:"",
fruit:[
"蘋果","沙果","海棠","野櫻莓","枇杷","歐楂","山楂","香梨",
"雪梨 ","溫柏","薔薇果","花楸","杏","櫻桃","桃","水蜜桃",
"油桃","蟠桃","李子","梅子","西梅","白玉櫻桃 ","黑莓",
"覆盆子","云莓","羅甘莓","白里葉莓","草莓","菠蘿莓","橘子",
"砂糖桔","橙子","檸檬","青檸","柚子","金桔","葡萄柚","香櫞",
"佛手","指橙","黃皮果","哈密瓜","香瓜","白蘭瓜","刺角瓜"
]
}
},
computed:{
"fFruit"(){
// 如果關鍵字為空，返回所有的水果
if(this.keyword==""){
return this.fruit;
}else{
// 當Frui里面某一項文字包含keyword文字那么就把當前數據保留
// filter過濾 返回為真保留，為false就過濾掉
return this.fruit.filter(item=>{
return item.includes(this.keyword)
})
}
}
}
})
</script>
</html>結果：
以上是“vue如何實現搜索小功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
