Vue에서 데이터 쿼리 및 검색을 구현하는 방법

Vue에서 데이터 쿼리 및 검색을 구현하는 방법

인터넷이 발전하고 데이터가 폭발적으로 증가함에 따라 데이터 쿼리 및 검색은 프로젝트의 일반적인 요구 사항이 되었습니다. Vue.js 프레임워크에서는 몇 가지 기술과 도구를 사용하여 데이터 쿼리 및 검색 기능을 구현할 수 있습니다. 이 문서에서는 몇 가지 일반적인 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 기본 데이터 쿼리

먼저 필터를 이용한 기본 데이터 쿼리 방법을 소개하겠습니다. 필터 필터는 배열을 필터링하고 지정된 조건에 따라 요구 사항을 충족하는 데이터를 필터링할 수 있습니다. 다음은 기본 사용 예입니다.

<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>

위 코드에서는 v-model 지시문을 통해 입력 키워드를 데이터의 키워드 속성에 바인딩합니다. 그런 다음 계산된 속성filteredList를 사용하여 키워드가 포함된 데이터 항목을 필터링하고 페이지에 표시합니다.

2. 퍼지 검색

때로는 퍼지 검색, 즉 키워드 내용의 일부를 기반으로 매칭을 수행해야 할 때가 있습니다. Vue.js에서는 정규식을 사용하여 퍼지 검색을 구현할 수 있습니다. 예는 다음과 같습니다.

<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>

위 코드에서는 RegExp 생성자를 사용하여 정규식 개체를 만듭니다. 그중 i는 대소문자 무시를 의미합니다. 그런 다음 계산된 속성filteredList를 사용하여 정규식을 기반으로 일치하는 데이터 항목을 필터링합니다.

3. 조건부 쿼리

때로는 키워드뿐만 아니라 특정 조건을 기반으로 쿼리해야 하는 경우도 있습니다. Vue.js에서는 계산된 속성과 v-bind 명령어를 사용하여 조건부 쿼리를 구현할 수 있습니다. 예는 다음과 같습니다.

<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>

위 코드에서는 쿼리 카테고리를 선택하기 위한 드롭다운 상자를 추가했습니다. 입력 키워드와 선택된 카테고리에 따라 계산된 계산 속성filteredList를 통해 조건에 ​​맞는 데이터 항목을 필터링합니다.

요약

이 글에서는 Vue.js 프레임워크에서 데이터 쿼리 및 검색을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 위의 방법을 통해 다양한 쿼리 및 검색 요구 사항을 유연하게 처리할 수 있습니다. 독자들에게 도움이 되기를 바랍니다.

위 내용은 Vue에서 데이터 쿼리 및 검색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!