vue實現搜尋小功能
阿新 • • 發佈:2021-11-26
本文例項為大家分享了實現搜尋小功能的具體程式碼,供大家參考,具體內容如下
<!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="/vue.js" trSYHPHShrype="text/" charset="utf-8"></script> <script type="text/script"> new Vue({ el:"#app",data(){ return{ keyword:"",fruit:[ "蘋果","沙果","海棠","野櫻莓","枇杷","歐楂","山楂","香梨","雪梨 ","溫柏","薔薇果","花楸","杏","櫻桃","桃","水蜜桃","油桃","蟠桃","李子","梅子","西梅","白玉櫻桃 ","黑莓","覆盆子","雲莓","羅甘莓","白裡葉莓","草莓","菠蘿莓","橘子","砂糖桔","橙子","檸檬","青檸","柚子","金桔","葡萄柚","香櫞","佛手","指橙","黃皮果","哈密瓜",rSYHPHShr"香瓜","白蘭瓜","刺角瓜" ] } },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>
結果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。