How to realize the search function of vue
This article mainly introduces vue how to achieve the search small function, the article introduces in great detail, has a certain reference value, interested friends must read it!
The details are as follows
{{item}} new Vue ({el: "# app", data () {return {keyword: ", fruit: [" Apple "," sand fruit "," begonia "," wild cherry "," loquat "," Hawthorn "," Hawthorn "," fragrant pear "," Sydney "," cypress "," rose fruit "," Juglans mandshurica "," apricot "," cherry "," peach " "Honey peach", "nectarine", "flat peach", "plum", "plum", "white jade cherry", "BlackBerry", "raspberry", "cloud berry", "Luogan berry", "white leaf berry", "strawberry", "pineapple", "orange", "sugar orange", "orange", "lemon", "lime", "grapefruit", "kumquat", "grapefruit" "Citron", "bergamot", "finger orange", "yellow peel fruit", "cantaloupe", "cantaloupe", "Bailan melon", "cantaloupe"]}}, computed: {"fFruit" () {/ / if the keyword is empty Return all fruits if (this.keyword== "") {return this.fruit } else {/ / when a text in Frui contains keyword text, then the current data is retained / / filter filtered back to true retention, and return this.fruit.filter is filtered for false (item= > {return item.includes (this.keyword)})})
Results:
The above is all the content of the article "how to achieve the search small function of vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
