How to implement data query and search in Vue

How to implement data query and search in Vue

With the development of the Internet and the explosive growth of data, data query and search have become common needs in projects . In the Vue.js framework, we can use some techniques and tools to implement data query and search functions. This article will introduce some common methods and provide specific code examples.

1. Basic data query

First, let’s introduce a basic data query method, which is to use filter. The filter filter can filter the array and filter out the data that meets the requirements according to the specified conditions. The following is a basic usage example:

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要查询的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter((item) =>
        item.includes(this.keyword)
      );
    },
  },
};
</script>

In the above code, we bind the input keywords to the keyword attribute in the data through the v-model directive. Then use the computed property filteredList to filter out data items containing keywords and display them on the page.

2. Fuzzy search

Sometimes, we need to perform fuzzy search, that is, matching based on part of the keyword content. In Vue.js, we can use regular expressions to implement fuzzy search. Here is an example:

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      const reg = new RegExp(this.keyword, 'i');
      return this.list.filter((item) =>
        reg.test(item)
      );
    },
  },
};
</script>

In the above code, we use the RegExp constructor to create a regular expression object. Among them, i means ignore case. Then, we use the computed property filteredList to filter out matching data items based on the regular expression.

3. Conditional query

Sometimes, we need to query based on some conditions, not just keywords. In Vue.js, we can use computed properties and v-bind instructions to implement conditional queries. Here is an example:

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <select v-model="type">
      <option value="">全部</option>
      <option value="水果">水果</option>
      <option value="蔬菜">蔬菜</option>
    </select>
    <ul>
      <li v-for="item in filteredList">{{ item.name }}（{{ item.type }}）</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      type: '',
      list: [
        { name: '苹果', type: '水果' },
        { name: '香蕉', type: '水果' },
        { name: '橙子', type: '水果' },
        { name: '萝卜', type: '蔬菜' },
        { name: '土豆', type: '蔬菜' },
      ],
    };
  },
  computed: {
    filteredList() {
      let filtered = this.list;
      
      if (this.keyword) {
        filtered = filtered.filter((item) =>
          item.name.includes(this.keyword)
        );
      }
      
      if (this.type) {
        filtered = filtered.filter((item) =>
          item.type === this.type
        );
      }
      
      return filtered;
    },
  },
};
</script>

In the above code, we have added a drop-down box for selecting the category of the query. Based on the entered keywords and selected categories, we filter out the data items that meet the conditions through the computed property filteredList.

Summary

This article introduces the method of implementing data query and search in the Vue.js framework, and provides specific code examples. Through the above methods, we can flexibly handle various query and search needs. Hope it helps readers.

The above is the detailed content of How to implement data query and search in Vue. For more information, please follow other related articles on the PHP Chinese website!