filter()实现模糊查询本地搜索功能

  1. helps是一个对象数组,
  2. filter()方法主要是用来过滤复合条件的数据的,返回的是所有符合条件的数据。
  3. 箭头函数,javascript的this指向问题。
  4. 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>
发布了50 篇原创文章 · 获赞 7 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/xh_960125/article/details/103989250