vue前端对象模糊查询

最新推荐文章于 2024-01-04 20:27:57 发布

Twinkle little star

最新推荐文章于 2024-01-04 20:27:57 发布

阅读量862

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43772661/article/details/108752688

版权

笔者在此记录前端模糊查询
1、html部分

	<div>
      <a-input placeholder="请输入关键字搜索" v-model="name" @change="onChange">
        <a-icon slot="prefix" type="search" />
      </a-input>
    </div>
    //下面是v-for循环的List列表，作省略

2、js部分

export default {
  data() {
    return {
      List: [
        { realname: 1 },
        { realname: 12 },
        { realname: 1234 },
        { realname: 1235 },
        { realname: 1236 }
        ],
      name: "", //模糊查询，v-model
    };
  },
  methods: {
  	/**
     * 模糊搜索值变化
     */
    onChange() {
      let self = this;
      console.log(self.name);
      let a = self.List.filter( v => {
        return JSON.stringify(v.realname).indexOf(self.name) !== -1   //JSON.stringify()是必须的
      });
      console.log(a);
      self.List = a;
    }
  }
}