In Vue, a v-for loop is used to get dynamic data, thus creating a dom tree, such as the very common ul>li list. When I need to traverse an array or enumerate an object and display it in a loop, I often use the list rendering instruction v-for. It needs to be used in combination with in or of, as follows. When Vue renders elements, for the sake of efficiency, it will reuse existing elements as much as possible instead of re-rendering. If you don't want this, you can use the key attribute provided by Vue, which allows you to decide whether to reuse elements. Key The value must be unique.
Look directly at the sample code as follows:
<div id="app">
<h2>v-for:</h2>
Please enter the value you want to filter(name or age):<input type="text" v-model="inputVal">
<ul>
<li v-for="(value,index) of filterPerson">{{value.id}}-{{value.name}}-{{value.age}}</li>
</ul>
</div>
<script>
Vue.config.productionTip=false;
var vm = new Vue({
el: '#app',
data: {
inputVal:'',
num:100,
person:[
{id:1001,name:"aaa",age:18},
{id:1002,name:"bbb",age:19},
{id:1003,name:"ccc",age:20}
],
filterPerson:[]
},
methods: {
},
watch:{
inputVal:{
immediate:true,
handler(value){
this.filterPerson=this.person.filter((item)=>{
return item.name.indexOf(value)!==-1||item.age.toString()===value;
})
}
}
}
});
/* var vm = new Vue({
el: '#app',
data: {
inputVal:'',
num:100,
person:[
{id:1001,name:"aaa",age:18},
{id:1002,name:"bbb",age:19},
{id:1003,name:"ccc",age:20}
],
},
methods: {
},
computed:{
filterPerson(){
let afterval= this.person.filter((item)=>{
return item.name.indexOf(this.inputVal)!==-1||item.age.toString()===this.inputVal;
})
return afterval;
}
}
}); */
</script>
Comments
Post a Comment