• Welcome to the eight blog of that year. I am very glad to meet you at the right age.
  • The little buddy who has logged on QQ due to the theme shows the default head in the comments. Please go to the personal center to upload the avatar again.

Vue.js to achieve simple search function

Code Notes Barben 7 months ago (03-30) 1030 browse 0 comments

The implementation of this search function is very simple, whether it is method or logic (at the end of the article). There are only two ways to use filter and match. Now let's go to two simple demo.

Demo1: input box content changes automatically search

HTML code

 <div id= "app" >
<input type= "text" placeholder= "please input the content you need to query" v-model= "search" >
<ul>
<li v-for= ">
<ul>
<li".

VUE code

 new Vue({
    el: "#app",
    data: {
        search: "",
        list: [
            "上路巩州遇虎熊",
            "五百年前一场疯",
            "腾宵又是孙悟空",
            "失马鹰愁涧飞白龙",
            "沙河阻断路难通",
            "福陵山中收天蓬",
            "岭上前行逆黄风",
            "七星不照波月洞",
            "千年白骨化阴风",
            "鱼篮网通天一尾红",
            "紫金葫芦二道童",
            "九尾老狐敢压龙",
            "白虹坠雪浪击石碎",
            "思归",
            "难归",
            "堕回",
            "轮回",
            "月满一江水",
            "前世莫追",
            "福泽聚宝象",
            "春风度不让洛阳",
            "玉面狐折兰香",
            "七绝崖上暗伏赤色大蟒",
            "过西梁女儿国",
            "鸳鸯罗帐",
            "与三道斗法相火云扬",
            "明枪易挡暗 
computed: {
searchList: function () {
return this.list.filter ((text) = {
return > text.match (this.search);

Demo2: click OK to manually search the contents of the input box.

HTML code

 <div id= "app" >
<input type= "text" placeholder= "please input the content you need to query" v-model= "search" >
<button v-on:click= ">
<button"

VUE code

 new Vue({
el: "#app",
data: {
    search: "",
    list: [
        "上路巩州遇虎熊",
        "五百年前一场疯",
        "腾宵又是孙悟空",
        "失马鹰愁涧飞白龙",
        "沙河阻断路难通",
        "福陵山中收天蓬",
        "岭上前行逆黄风",
        "七星不照波月洞",
        "千年白骨化阴风",
        "鱼篮网通天一尾红",
        "紫金葫芦二道童",
        "九尾老狐敢压龙",
        "白虹坠雪浪击石碎",
        "思归",
        "难归",
        "堕回",
        "轮回",
        "月满一江水",
        "前世莫追",
        "福泽聚宝象",
        "春风度不让洛阳",
        "玉面狐折兰香",
        "七绝崖上暗伏赤色大蟒",
        "过西梁女儿国",
        "鸳鸯罗帐",
        "与三道斗法相火云扬",
        "明枪易挡暗箭难防"
    ],
    listSearch: [
        "上路巩州遇虎熊",
        "五百年前一场疯",
        "腾宵 又是孙悟空",
        "失马鹰愁涧飞白龙",
        "沙河阻断路难通",
        "福陵山中收天蓬",
        "岭上前行逆黄风",
        "七星不照波月洞",
        "千年白骨化阴风",
        "鱼篮网通天一尾红",
        "紫金葫芦二道童",
        "九尾老狐敢压龙",
        "白虹坠雪浪击石碎",
        "思归",
        "难归",
        "堕回",
        "轮回",
        "月满一江水",
        "前世莫追",
        "福泽聚宝象",
        "春风度不让洛阳",
        "玉面狐折兰香",
        "七绝崖上暗伏赤色大蟒",
        "过西梁女儿国",
        "鸳鸯罗帐",
        "与三道斗法相火云扬",
        "明枪易挡暗箭难防"
    ]
},
methods: {
    searchCont(){
        this.listSearch = this.list.filter((text) => {
            return text.match(this.search);
        })
    }
}
})

In essence, there are only two sentences.

First, let's see what filter means.

 / / now I have an array in my hand, which represents the age of people. I want to get those who are more than 18 to make a fight. 
var arr = [32, 33, 16, 40]; the filter method is used for this array. The callback function in filter has a parameter num, which can be regarded as a value traversed from the array every time, and return can be an expression after all, in short, it returns all the values that match this expression. The result is true (coincidence greater than or equal to 18), so it returns [32, 33]
 third times: the parameter in the callback function is 16, and the result is false (not greater than or equal to 18), so the return parameter is still num. The parameter in callback function is num, and the result is 
arr. Operation logic: the 
arr array has 4 values, so filter executes 4 times, the first time: the num in the callback function is 32, and the result is true.

Let's see what match means again.

 / / I have a string, you can use the match method to retrieve whether there is a content in the string, 
var Hello = "Hello, the world"; if you want to retrieve the content, you can return this content, and you can also know where the content is located (index 0, the first). The result is: [you, index: 0, input: "Hello, world"]
console.log (hello.match ("you"));

Therefore, the idea of using filter and match to mix search is a simple sentence:

 The way to implement search is to use the filter method to use the filter method to get the values that satisfy the requirements (i.e. the result is true). The condition is: use the match method to traverse values (text) in the array (list). If the content of user search is in this value, we should pay attention to the result that the result returned by the method is either a value (any non empty text data is converted to boolean type is all), otherwise, it is a (empty value conversion to boolean type). This.list.filter ((text) = > {
return text.match (this.search);

Finally, I'll give you a supplement to the compulsory conversion of Boolean:

When all contents are coerced into Boolean values.
Will be converted to "false" as follows:
"," 0, -0, NaN, null, undefined, false
Any "false" list is not "true", for example:
"Hello", 18, true, array array[], object object{}, function function ()


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Vue.js to achieve a simple search function - https://www.barben.cn/code/345.html
Love ( Twelve )
Publish my comments
Cancel comment
Expression Map Thickening Delete line Centered Italics

In the eight year commentary, you need to bring your nickname and mailbox.

  • Nickname (required)
  • Mailbox (required)
  • Website