- helps是一个对象数组,
- filter()方法主要是用来过滤复合条件的数据的,返回的是所有符合条件的数据。
- 箭头函数,javascript的this指向问题。
- match() 方法是用来模糊匹配的,可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
<template>
<div>
<input type="text" v-model="searchText" placeholder="搜索" class="search">
<div v-theme:column="'wide'" class="helprow" v-for="help in filteredhelps">
<h6 v-titleColor>{{help.title}}</h6>
</div>
</div>
</template>
<script>
export default {
data(){
return{
helps:[
{title:"111111"},
{title:"222222"},
{title:"55555"},
],
searchText:''
}
},
computed:{
filteredhelps:function () {
return this.helps.filter((help)=>{
return help.title.match(this.searchText);
})
}
}
}
</script>
<style scoped>
.search{
width: 80%;
margin: 0 auto;
background: #C0C0C0;
border-radius: 25px;
text-indent: 10px;
}
.helprow{
background-color: #efefef;
padding: 10px;
margin: 10px auto;
text-align: left;
}
.helprow h6{
margin: 0 0 10px 0;
border-bottom: 1px solid #C8C7CC;
}
</style>