<input type="text" v-model="search" placeholder="输入搜索内容">
<div v-for="item in filterdMsgs" class="oneMsg">
<h3>{{item.head}}</h3>
<!-- 在main.js设置了自定义过滤,让长度0-100 -->
<p>{{item.body|snippet}}</p>
注意在computed中放过滤函数,如果改动较大用computed,使用methods会所有函数都触发。
用es6中数组的filter方法,返回的是Boolean值,如果没有匹配就全显示。
computed:{
filterdMsgs:function(){
// 和搜索内容匹配才显示
return this.msgs.filter((msgs)=>{
return boolean(msgs.head.match(this.search));
});
}
}