首页 > 其他分享> 文章详细

VueJS实现迷糊查询

2022-03-25 14:00:40 阅读：191 来源： 互联网

标签：return name VueJS 迷糊查询 filter 数组 input id

原文请查看公共号

前置条件:

开发环境：windows
开发框架：vue2.5 ,vue-cli 4.0+
编辑器：HbuilderX
兼容版本：vue2.5 Chrome 99.0.4844.51

正文：实现此功能需要用到JS的 filter， includes两个API ,具体使用方法，童鞋们自行百度，不再一一赘述

打开控制台，可以看到选中的数组

上热乎乎的代码：

<template>
  <div id="app">
    <input type="text" v-model="input" />
    <ul>
      <li v-for="item of search"
        :key="item.name"
        @click="selection(item)"
      >{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      items: [
        { name: "路飞" ,id:2},
        { name: "索隆" ,id:3 },
        { name: "路也" ,id:4 },
        { name: "娜美" ,id:5 },
        { name: "山本" ,id:6 },
        { name: "美了" ,id:7 },
        { name: "乔治山本路夫" ,id:8 },
        { name: "美杜莎" ,id:1 },
        { name: "娜美尼可" ,id:9 }
      ],
      input: ""
    };
  },
  methods:{
    selection(data){
      console.log("选中的数据：",data);
    }
  },
  computed: {
    search() {
      if (!this.input) {
        return this.items;
      }
      return this.items.filter(v => {
        return v.name.includes(this.input);
      });
    }
  }
};
</script>

Ps:因为要对数组进行过滤，使用 filter 填充所有通过测试的数组，而

includes 方法确定数组是否包含指定的元素，返回布尔值；如果返会true,说明存在符合条件的数组，filter 会自动筛选出来与条件相匹配的数据，并自动返回

标签：return,name,VueJS,迷糊,查询,filter,数组,input,id
来源： https://www.cnblogs.com/ts119/p/16054323.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VueJS实现迷糊查询