#vue implements fuzzy search function
##Step 1: Prepare initial data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List filter</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>Car information</h2>
<input type="text" placeholder="Please enter..." v-model:value="keyword">
<ul>
<li v-for="(item, index) in querycars"> {<!-- -->{item.name}} -- {<!-- -->{item.price}}</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //Close production tips
new Vue({<!-- -->
el:'#root',
data:{<!-- -->
keyword:'',
cars:[
{<!-- -->id:'001', name:'Red Flag', price:'30w'},
{<!-- -->id:'002', name:'Chevrolet', price:'40w'},
{<!-- -->id:'003', name:'Daben', price:'50w'},
{<!-- -->id:'004', name:'Cadillac', price:'60w'},
{<!-- -->id:'005', name:'Mustang', price:'70w'}
],
},
})
</script>
</body>
</html>
##Step 2: Don’t worry, let’s review the monitoring properties first
/*
//Complete writing method of monitoring attributes (functional style):
// keyword: function(){}, the most complete format
// keyword(){}, es6 abbreviation, omit colon and function
// keyword(newvalue, oldvalue){ console.log(newvalue,oldvalue); }, two formal parameters need to be passed in. The first parameter receives and monitors the value before the change, and the second parameter monitors the value after the change.
// Complete writing method of monitoring attributes (object style):
keyword:{
immediate:true, //execute immediately, default value is false
deep:true, //Enable deep monitoring, default value is false
handler(newvalue, oldvalue){ console.log(newvalue,oldvalue); }
}
//At this point you may have a question, when do we use functional writing? When to use object-style writing?
//The simplest way is to use functional writing. When you find that functional writing doesn't work, just switch to object writing. The more you write, the clearer it will be!
*/
##Step 3: Don’t worry, at this time we are reviewing the filter method of the array and the indexOf method of the string.
/*
Array filter method:
First, the original array will not be changed, but it will return a brand new array after filtering. You need to write a return to write the corresponding processing logic.
So, you know, of course you need to define an empty array to receive this return value!
IndexOf method of string:
This method is to determine whether the passed formal parameter is included in the string. If it is included, it returns its subscript position in the string. If it does not exist, it returns -1.
Analyze the code snippets in this case:
this.querycars = this.cars.filter(item => {
//The item parameter here is each object in the array object
return item.name.indexOf(newvalue) !== -1
})
*/
##Step 4: Explanation of relevant details
(1) First of all, why do we define querycars:[]?
This empty array is defined to receive the new array returned after filtering by the filter method in the array.
Used to perform v-for instruction in small li to traverse
If the original array is used directly, the original data cannot be displayed on the page after filtering.
After each filter, the data will become less and less
Solution:
Define an empty array querycars:[], which is used to receive the new array returned after filtering. You can traverse it in any way.
(2) Secondly, why should we use the complete writing method of monitoring attributes and use immediate:true?
If you do not enable immediate execution, the page will be blank at the beginning without any data. Friends who don’t believe it can comment it out and observe the page display effect!
Solution:
There is a detail here: because the indexOf method of a string is passed in an empty string, it will return an index of 0 instead of -1
Therefore, taking advantage of this small detail, we use the calculated attribute to enable immediate execution. At this time, our input box does not pass in any data, so it is an empty string.
At this time, the parameter received by the indexOf method is an empty string, which is equivalent to the fact that nothing in the original array has been filtered out, and the data will be returned intact.
At this time, when you open the page, the data will be displayed!
##Listening attribute implementation complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List filter</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>Car information</h2>
<input type="text" placeholder="Please enter..." v-model:value="keyword">
<ul>
<li v-for="(item, index) in querycars"> {<!-- -->{item.name}} -- {<!-- -->{item.price}}</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({<!-- -->
el:'#root',
data:{<!-- -->
keyword:'',
cars:[
{<!-- -->id:'001', name:'Red Flag', price:'30w'},
{<!-- -->id:'002', name:'Chevrolet', price:'40w'},
{<!-- -->id:'003', name:'Daben', price:'50w'},
{<!-- -->id:'004', name:'Cadillac', price:'60w'},
{<!-- -->id:'005', name:'Mustang', price:'70w'}
],
querycars:[],
},
watch:{<!-- -->
/*
//Complete writing method of monitoring attributes (functional style):
// keyword: function(){}, the most complete format
// keyword(){}, es6 abbreviation, omit colon and function
// keyword(newvalue, oldvalue){ console.log(newvalue,oldvalue); }, two formal parameters need to be passed in. The first parameter receives and monitors the value before the change, and the second parameter monitors the value after the change.
// Complete writing method of monitoring attributes (object style):
keyword:{
immediate:true, //execute immediately, default value is false
deep:true, //Enable deep monitoring, default value is false
handler(newvalue, oldvalue){ console.log(newvalue,oldvalue); }
}
*/
/*
Array filter method:
First, the original array will not be changed, but it will return a brand new array after filtering. You need to write a return to write the corresponding processing logic.
So, you know, of course you need to define an empty array to receive this return value!
IndexOf method of string:
This method is to determine whether the passed formal parameter is included in the string. If it is included, it returns its subscript position in the string. If it does not exist, it returns -1.
Analyze the code snippets in this case:
this.querycars = this.cars.filter(item => {
//The item parameter here is each object in the array object
return item.name.indexOf(newvalue) !== -1
})
*/
keyword:{<!-- -->
immediate: true,
handler(newvalue){<!-- -->
this.querycars = this.cars.filter(item => {<!-- -->
return item.name.indexOf(newvalue) !== -1
})
}
}
}
})
</script>
</body>
</html>
##Computed property implementation complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List filter</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>Car information</h2>
<input type="text" placeholder="Please enter..." v-model:value="keyword">
<ul>
<li v-for="(item, index) in querycars"> {<!-- -->{item.name}} -- {<!-- -->{item.price}}</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({<!-- -->
el:'#root',
data:{<!-- -->
keyword:'',
cars:[
{<!-- -->id:'001', name:'Red Flag', price:'30w'},
{<!-- -->id:'002', name:'Chevrolet', price:'40w'},
{<!-- -->id:'003', name:'Daben', price:'50w'},
{<!-- -->id:'004', name:'Cadillac', price:'60w'},
{<!-- -->id:'005', name:'Mustang', price:'70w'}
],
},
// watch:{<!-- -->
// keyword:{<!-- -->
//immediate:true,
// handler(newvalue){<!-- -->
// this.querycars = this.cars.filter(item => {<!-- -->
// return item.name.indexOf(newvalue) !== -1
// })
// }
// }
// },
computed:{<!-- -->
querycars(){<!-- -->
// Calculated properties mainly rely on return values!
//So there is no need to define an empty array to receive the return value after filtering!
// Just write the variable name defined by the calculated attribute directly in the place traversed by v-for.
return this.cars.filter(item => {<!-- -->
return item.name.indexOf(this.keyword) !== -1
})
}
}
})
</script>
</body>
</html>
##This is my first seriously written blog post! ! ! I hope it can give some help to those in need! !
##May there be enough clouds in your life to create a beautiful dusk!