Vue implements small search function

This article example shares the specific code of Vue to implement the search function for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div id="app">
   <input type="text" v-model="keyword" placeholder="Enter keyword" />
   <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:
      "Apple", "Sand apple", "Begonia", "Aronia", "Loquat", "Hawthorn", "Hawthorn", "Pear",
      "Snow pear", "Quincea", "Rose hip", "Rannon", "Apricot", "Cherry", "Peach", "Peach",
      "Nectarine", "Peach", "Plum", "Plum", "Prune", "White Jade Cherry", "Blackberry",
      "Raspberry", "Cloudberry", "Loganberry", "Brunette", "Strawberry", "Pineappleberry", "Orange",
      "Sugar orange", "orange", "lemon", "lime", "pomelo", "kumquat", "grapefruit", "citron",
      "Buddha's hand", "Finger orange", "Yellow fruit", "Cantaloupe", "Cantaloupe", "Honey melon", "Prickly horn melon"
     ]
    }
   },
   computed:{
    "fFruit"(){
     // If the keyword is empty, return all fruits if(this.keyword==""){
     return this.fruit;
    }else{
     // When a certain item in Frui contains keyword text, keep the current data // filter returns true to keep, false to filter out return this.fruit.filter(item=>{
      return item.includes(this.keyword)
     })
    }
    }
    
   }
  })
 </script>
</html>

result:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementing a simple search box based on Vue.js
How to use vue + element to implement table paging and front-end search
Vue.js implements table functions of multi-condition filtering, searching, sorting and paging
Vue implements search function
Vue Element grouping + multi-selection + searchable Select selector implementation example
Vue el-autocomplete remote search drop-down box and implement automatic filling function (recommended)
Vue component practice searchable drop-down box function
Implementing a custom component for searchable drop-down box based on Vue
Vuejs uses filterBy and orderBy to implement search filtering and descending sorting of data
Detailed explanation of the use of Vue2.0 multi-condition search component

<<: Search engine free collection of website entrances

>>: A brief discussion on the underlying principle of mysql join