I believe that everyone will inevitably use the function of keyword filtering in project development. This time, if you need to do this, I will sort out the code for input keywords to search data list in vue's input box. The following code is directly listed:
html：
<!-- filterdemo -->
<template>
<div>
<input type="text" v-model="search">
<ul>
<!-- Notice！Notice！Notice！What is looped through here isitems，No moredataInsidelistArray -->
<li v-for="(item,index) in items">
<span>{{}}</span>
<span>{{}}</span>
</li>
</ul>
</div>
</template>
Match (all ||single) fields > js:
export default {
data () {
return {
search:'',
list:[
{name:'AAA',msg:'aaa text introduction 1'},
{name:'BBB',msg:'bbb text introduction 2'},
{name:'CCC',msg:'ccc text introduction 3'},
{name:'DDD',msg:'ddd text introduction 4'},
{name:'EEE',msg:'eee text introduction 5'},
]
}
},
computed: {
//Filter method items: function() {
var _search = ;
if (_search) {
//Case insensitive processing var reg = new RegExp(_search, 'ig')
// es6 filter filter match, if there is, return the current, if there is no, return all return (function(e) {
//Match all fields return (e).some(function(key) {
return e[key].match(reg);
})
//Match a field // return (reg);
})
};
return ;
}
},
}
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
For more vue learning tutorials, please read the topic"Vue Practical Tutorial"
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.