vue(五)---模糊搜索

最新推荐文章于 2024-07-25 15:19:10 发布

是落落呢

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量221

点赞数

分类专栏： Vue 文章标签： Vue.js computed属性列表过滤姓名搜索前端开发

本文链接：https://blog.csdn.net/m0_46104664/article/details/125145453

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
  <div class="a">
    <input type="text" v-model="val">
    <ul v-for="(item,index) in filterList" :key="index">
      <li>{{item.name}}--{{item.age}}--{{item.sex}}</li>
    </ul>
    <div v-if="filterList.length === 0">
      empty
    </div>
  </div>
</template>

准备数据：

        list:[
          {
            name:'张三',
            age:18,
            sex:'男'
          },
          {
            name:'张四',
            age:18,
            sex:'男'
          },
          {
            name:'张无',
            age:18,
            sex:'男'
          },
          {
            name:'里三',
            age:18,
            sex:'男'
          },
          {
            name:'码三',
            age:18,
            sex:'男'
          },
          {
            name:'六七',
            age:18,
            sex:'男'
          },
          {
            name:'手动话',
            age:18,
            sex:'男'
          },
          {
            name:'色图三',
            age:18,
            sex:'男'
          },
          {
            name:'军队讨伐',
            age:18,
            sex:'男'
          },
          {
            name:'用户',
            age:18,
            sex:'男'
          },
        ],

使用computed属性:

      filterList(){
        let arr = [];
        arr = this.list.filter((item)=>{
          return item['name'].indexOf(this.val) != -1
        })
        return arr;
      }