Surely we will inevitably use keyword filtering function in project development, the project needs to be done just this one, you sort out vue of input data input box to enter the code to retrieve a list of keywords. Directly below the Code:
html：
<! - Screening Demo ->
<Template>
<div>
<the INPUT of the type = "text" v-Model = "Search">
<ul>
<! - Note! note! note! Here loop through the items, the list is no longer in the data array ->
<-V for Li = "(Item, index) in items">
<span> item.name, for {{}} </ span>
<span > item.msg {{}} </ span>
</ Li>
</ UL>
</ div>
</ Template>
match (all single ||) field> js:
Export default {
Data () {
return {
Search: '',
List: [
{name: 'the AAA', MSG: 'AAA text presentation. 1'},
{name: 'the BBB', MSG: 'BBB text describes 2'} ,
{name: 'the CCC', MSG: 'CCC text presentation. 3'},
{name: 'dDD', MSG: 'ddd text presentation. 4'},
{name: "the EEE ', MSG:' Eee text describes 5 ' },
]
}
},
computed: {
// filtration
items: function () {
var _search = this.search;
IF (_search) {
// case insensitive processing
var reg = new RegExp (_search, 'ig')
// es6 filter matched filter, there is a current return, no return all
return this.list.filter (function (E) {
// all fields match
return Object.keys (E) .some (function (Key) {
return E [key].match (REG);
})
// match a field
// return e.name.match(reg);
})
};
return this.list;
}
},
}
Original link: https: //blog.csdn.net/zuorishu/article/details/86630097