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 , let's go to two simple demos now!

Demo1: Automatic search when the content of input box changes

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

 new Vue({ el: "#app", data: { searchText: "", list: [ "The tiger and bear met in Shanglugong", "Five hundred years ago, there was a madness", "Tengxiao is the Monkey King again", "The lost horse eagle worries about the white dragon flying in the stream", "Shahe River blocks the road and makes it difficult to get through", "The canopy in Fuling Mountain", "Going forward on the mountain against the yellow wind", "Seven stars do not shine in the wave moon cave", "The thousand year old bones turn into Yin wind", "The net of the fish basket is all over the sky, and the tail is red", "The Second Daughter of Purple Golden Gourd", "Nine old foxes dare to crush dragons", "The white rainbow falls, the snow waves smash the rocks", "Thinking about returning", "Difficult to return", "Fall back", "Metempsychosis", "The moon fills the river", "Never follow in previous lives", "Fortune Gathering Elephants", "The spring breeze is not as strong as Luoyang", "Jade faced fox breaks orchid fragrance", "The red python is hidden on the Qijue Cliff", "Passing the Western Liang Dynasty", "The mandarin ducks are in the tent", "Fighting with the Three Way Way", "An open gun is easier to block than to defend" ] }, computed: { searchList: function(){ return this.list.filter((text) => { return text.match(this.searchText); }) } } })

Demo2: Click OK to manually search the content in the input box

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

 new Vue({ el: "#app", data: { searchText: "", list: [ "The tiger and bear met in Shanglugong", "Five hundred years ago, there was a madness", "Tengxiao is the Monkey King again", "The lost horse eagle worries about the white dragon flying in the stream", "Shahe River blocks the road and makes it difficult to get through", "The canopy in Fuling Mountain", "Going forward on the mountain against the yellow wind", "Seven stars do not shine in the wave moon cave", "The thousand year old bones turn into Yin wind", "The net of the fish basket is all over the sky, and the tail is red", "The Second Daughter of Purple Golden Gourd", "Nine old foxes dare to crush dragons", "The white rainbow falls, the snow waves smash the rocks", "Thinking about returning", "Difficult to return", "Fall back", "Metempsychosis", "The moon fills the river", "Never follow in previous lives", "Fortune Gathering Elephants", "The spring breeze is not as strong as Luoyang", "Jade faced fox breaks orchid fragrance", "The red python is hidden on the Qijue Cliff", "Passing the Western Liang Dynasty", "The mandarin ducks are in the tent", "Fighting with the Three Way Way", "An open gun is easier to block than to defend" ], searchList: [] }, methods: { search(){ this.searchList = this.list.filter((text) => { return text.match(this.searchText); }) } }, created() { this.searchList = this.list; } })

In fact, at the end, there are only two sentences of essence

Let's see what the filter method does first?

 //Now I have an array in my hand, which represents the age of people. I want to find out those people who are 18 or older (who can stand it if I really start)!!! 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 that is traversed from the array every time. The return can be followed by an expression. In short, all values that match this expression are returned. Operation logic: The arr array has four values, so the filter will execute four times, The first time: the parameter num in the callback function is 32, and the result is true (18 or more), so now the return is [32] The second time: the parameter num in the callback function is 33, and the result is true (conforming to 18 or more), so now the return is [32, 33] Third time: the parameter num in the callback function is 16, and the result is false (not equal to or greater than 18), so now it returns [32, 33] The fourth time: the parameter num in the callback function is 40, and the result is true (18 or more), 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 does the match method do?

 //I have a string. You can use the match method to retrieve whether there is something in the string Var hello="Hello, the world"; //If you need to retrieve the content in the string, return the content, and you can also know the location of the content (index 0, first) //The result is: ["You", index: 0, input: "Hello, the world"] Console. log (hello. match ("you")); //Of course, there is no "I" in this string, so null will be returned //The result is: null Console. log (hello. match ("I"));

Therefore, the idea of using filter and match methods to realize search is simple:

 this.list.filter((text) => { return text.match(this.searchText); }) //Ideas for realizing search: //Use the filter method on the list array to get all the values that meet the condition (that is, the result is true) //The condition here is to use the match method for each traversed value (text) in the array (list). If the user's search content (this. search) exists in this value //Note here that the result returned by the match method is either a value (any non empty text data converted to a Boolean type is true) or null (null data converted to a Boolean type is false) //So in the end, all the contents that match the search keywords in the list array are returned.

Finally, I will supplement the lesson about mandatory conversion of Boolean:

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