1: For example, the user has 4 pieces of data. We want to change the data from the original 4 pieces of data to only display the data related to our input after searching in the input box.
That is to achieve the effect as shown in the figure below:
2: How to achieve it in terms of thinking? First of all, in the first step, we should think of using v-model to get the user's input:
Just like this: here the user's input has been obtained through keyWord
<div id="root">
<h2>用户</h2>
<input type="text" placeholder="请输入" v-model="keyWord">
<ul>
<li v-for="(item,index) of perons" :key="index">
{
{item.name}}---{
{item.age}}---{
{item.sex}}
</li>
</ul>
</div>At this time, the keyWord in data will have a corresponding value as the user inputs.
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'1',name:'张三丰',age:19,sex:'男'},
{id:'2',name:'张晓雨',age:20,sex:'女'},
{id:'3',name:'王晓明',age:28,sex:'男'},
{id:'4',name:'王大熊',age:32,sex:'男'}
]
}
}) Then the next step is to compare the input value with the existing data. If there is data in the same field, then these data are the data we want to re-render to the page.
Here we use the filter method of the array
The filter() method creates a new array whose elements are checked by checking all elements in the specified array that meet the criteria.
Note: filter() does not check for empty arrays.
Note: filter() does not alter the original array
and the indexOf method
The indexOf() method returns the position of a specified element in the array.
This method will search the array from beginning to end to see if it contains the corresponding element. The search starts at the array start or the beginning of the array (when no start parameter is specified). If an item is found, the position of the first occurrence of item is returned. The index of the starting position is 0.
Returns -1 if the code does not find the specified element in the array.
code show as below:
computed:{
filPerons(){
return this.persons.filter((item)=>{
return item.name.indexOf(this.keyWord) !== -1
})
}
}At this point, the persons array displayed at the beginning should be changed to a new array filPersons
<li v-for="(item,index) of filPerons" :key="index">If you don't know about computed properties, you can look them up. To put it bluntly, the filPersons thing will be executed directly and return a value. And what is returned here is a new array. So it can be rendered on the page.
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>用户</h2>
<input type="text" placeholder="请输入" v-model="keyWord">
<ul>
<li v-for="(item,index) of filPerons" :key="index">
{
{item.name}}---{
{item.age}}---{
{item.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'1',name:'张三丰',age:19,sex:'男'},
{id:'2',name:'张晓雨',age:20,sex:'女'},
{id:'3',name:'王晓明',age:28,sex:'男'},
{id:'4',name:'王大熊',age:32,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
</html>