• Welcome to the eight year blog, I'm glad to meet you at the right age!
  • Due to the theme, QQ login partners will display the default avatar in the comments. Please go to the personal center and upload the avatar again.

Vue.js realizes simple search function

Code Notes barben 2 years ago (March 30, 2019) 4028 views 6 comments

The implementation of this search function is very simple, whether it is method or logic (the idea is at the end of the article), Only filter and match are used Now let's do two simple demos!

Demo1: automatic search for changes in input box content

HTML code

 < div id = app "> 
 < input type =" text "placeholder =" please enter the content you need to query "V-model =" searchtext "> 
 < UL > 
 < Li V-for =" item in searchlist "> {item}} < / Li > 
 < / UL > 
 < / div >

Vue code

 A period of the period is a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of the a period of in the sky, "The yellow wind goes ahead on the mountain", "seven stars don't shine on the wave moon cave", "the thousand year white bone turns the wind", "the fish basket net makes the sky a red tail", "the purple gold gourd two children", "the nine tail old fox dare to press the dragon", "the white rainbow falling snow wave hits the stone, the ԡ" think back "," hard to return "," fall back "," fall back "," fall back "," fall back "," fall back "," fall back ".10, "Reincarnation", 
 "moon full of a river", 
 "don't chase after the past life", 
 "gather treasure like images of blessing", 
 "spring breeze can't let Luoyang", 
 "jade face fox turns orchid fragrance", 
 "hidden red Python on Qijue cliff", 
 "passing through Xiliang's daughter country", 
 "Yuan Yang Luo Zhang", 
 "fly with three fighting methods", 
 ", "The open gun is easy to block, but the hidden arrow is hard to defend" 
] 
}, 


}, 










} 


} 
}

Demo2: click OK to search the input box manually

HTML code

 < div id = "app" > 
 < input type = "text" placeholder = "please enter the content you need to query" V-model = "searchtext" @ Keyup. Enter = "search" > 
 < button @ Click = "search" > search < / button > 
 < UL > 
 < Li V-for = item in searchlist "> {item}} < / Li > 
 < / UL > 
 < / div >

Vue code

 list: [












ԡ


ԡ








ԡ















inthe middle of the canopy, "The yellow wind goes ahead on the mountain", "seven stars don't shine on the wave moon cave", "the thousand year white bone turns the wind", "the fish basket net makes the sky a red tail", "the purple gold gourd two children", "the nine tail old fox dare to press the dragon", "the white rainbow falling snow wave hits the stone, the ԡ" think back "," hard to return "," fall back "," fall back "," fall back "," fall back "," fall back "," fall back ".10, "Reincarnation", 
 "moon full of a river", 
 "don't chase after the past life", 
 "gather treasure like images of blessing", 
 "spring breeze can't let Luoyang", 
 "jade face fox turns orchid fragrance", 
 "hidden red Python on Qijue cliff", 
 "passing through Xiliang's daughter country", 
 "Yuan Yang Luo Zhang", 
 "fly with three fighting methods", 
 ", "A clear gun is a good defense, but a dark arrow is hard to defend" 
, searchlist: [] 
}, 
methods: {
search () {this.this.searchlist = this.list.filter ((text) = > {
 return text.match (this.searchtext); 
} 
} ԡ}, ԡ
}, 
}, 
 created () {
 created () {
 this.this.searchlist = this.list.list.filter ((text) ((text); (text); 
 
 
 
 
 
 

 this. Searchlist = this. List; 
} 
})

In fact, at the end, the essence is only two sentences

What's the method of filter first?

 //Now I have an array in my hand, which represents the age of people. I want to find out those people who are more than or equal to 18 and beat them (who can stand up to this with real action)!!! var arr = [32,33,16,40]; 
 / * 
 use the filter method for this array. The callback function in the filter has a parameter num, which can be regarded as a value traversed from the array each time, while the return can be followed by an expression. In short, it returns all the values that match this expression. running logic: 
 arr array has 4 values, so the filter will be executed 4 times, 
 the first time: the parameter num in the callback function is 32, and the result is true (consistent with or greater than 18), so now it returns [32] 
; the second time: the parameter num in the callback function is 33, and the result is true (consistent with or greater than 18), so now it returns [32, 33] 
 the third time: the parameter num in the callback function is 16, and the result is false (which does not match the value greater than or equal to 18), so now the returned parameter is still [32, 33] 
; the fourth time: the parameter num in the callback function is 40, and the result is true (conforming to or greater than 18), so the final result of the function execution is [32, 33, 40] 
 * / 
 var Daan = arr.filter (function (Num) {return num > = 18; 
}); The final result is: [32,33,40] 
 / console.log (Daan);

What is the match method for?

 //I have a string here. I can use the match method to retrieve whether there is any content in the string 




/ / if there is any content in the string that you need to retrieve, this content will be returned. At the same time, you can also know the location of the content (index 0, the first) 
 / / the result is: ["you", index: 0, Input: "Hello, world"] 
console.log (Hello. Match ("you");; 
/ / of course, there is no "I" in this string, so it will return null 
 / / the result is: null 
 console.log (Hello. Match ("I");

Therefore, the idea of using filter and match methods to realize search is such a simple sentence

 this.list.filter((text) => {
    return text.match(this.searchText); }) 

 / / the idea of searching is: 
 / / use the filter method for the array of list, and get all the values that meet the conditions (that is, the result is true) 
 / / the condition here is: use the match method for each traversal value (text) in the array (list), if the user's search content (this. Search) exists in this value 
// It should be noted that the result returned by the match method either has a value (any non empty text data converted to a boolean type is true) or null (a null value converted to a boolean type is false) 
 / / therefore, at the end of the list array, all the contents that match the search keywords are returned.

Finally, I'll give you a supplementary lesson on the transformation of Boolean

When various contents are cast to Boolean values
The contents that will be converted to "false" are as follows:
“”,0,-0,NaN,null,undefined,false
Anything that is not in the "false" list is "true", for example:
"Hello", 18, true, array array (), object {}, function ()


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Vue.js implements easy search function - https://www.barben.cn/code/345.html
Like it( nineteen )
Post my comments
Cancel comment
expression Mapping Bold Strikethrough Center Italics

You need to bring your nickname and email with you in the year of eight!

  • Nickname (required)
  • Email address (required)
  • website
Successfully captured six A rare spirit
  1.  lingfeng
    >alert('lingfeng')<
    lingfeng 2020-09-08 11:14 reply
  2. Text.match is not a function
    ss 2020-08-24 14:47 reply
    •  barben
      Did you declare this text in the parameter of the arrow function in the filter method?
      barben 2020-09-08 10:04 reply
  3. incorrect. mogul
    ss 2020-08-24 14:46 reply
  4. Error failed to compile with 1 errors 3:17:11 PM PM error error in error in. / SRC / APP. Vue syntax error error: new is a reserved word (14:2) 12 | export default { 13 | Name: 'app', > 14 ぽ > 14 | | 14 | | 14 | 14 | 14 | 14 | 13 | Name: 'app', > 14 | | 14 | 14 | | 14 | | 14 | 13 | Name:'app '; Name:'app' "new Vue ({ || ^ 15 | El:" ###app "), What's the reason for Ԟ?
    One third of the night 2020-06-28 15:21 reply
    •  barben
      You can easily understand that new Vue is written in. JS file, while export default is written in. Vue file. In the Vue complete project, the wording needs to be changed.
      barben 2020-08-19 16:44 reply