Bagaimana untuk melaksanakan pertanyaan data dan carian dalam Vue

Cara melaksanakan pertanyaan dan carian data dalam Vue

Dengan perkembangan Internet dan pertumbuhan data yang pesat, pertanyaan dan carian data telah menjadi keperluan biasa dalam projek. Dalam rangka kerja Vue.js, kami boleh menggunakan beberapa teknik dan alatan untuk melaksanakan pertanyaan data dan fungsi carian. Artikel ini akan memperkenalkan beberapa kaedah biasa dan memberikan contoh kod khusus.

1. Pertanyaan data asas

Pertama, mari kita perkenalkan kaedah pertanyaan data asas, iaitu menggunakan penapis. Penapis penapis boleh menapis tatasusunan dan menapis data yang memenuhi keperluan mengikut syarat yang ditetapkan. Berikut ialah contoh penggunaan asas:

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

Dalam kod di atas, kami mengikat kata kunci input kepada atribut kata kunci dalam data melalui arahan v-model. Kemudian gunakan sifat terkira filteredList untuk menapis item data yang mengandungi kata kunci dan memaparkannya pada halaman.

2. Carian kabur

Kadangkala, kita perlu melakukan carian kabur, iaitu padanan berdasarkan sebahagian kandungan kata kunci. Dalam Vue.js, kita boleh menggunakan ungkapan biasa untuk melaksanakan carian kabur. Berikut ialah contoh:

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

Dalam kod di atas, kami menggunakan pembina RegExp untuk mencipta objek ungkapan biasa. Antaranya, maksud saya abaikan kes. Kemudian, kami menggunakan sifat terkira filteredList untuk menapis item data yang sepadan berdasarkan ungkapan biasa.

3. Pertanyaan bersyarat

Kadangkala, kita perlu membuat pertanyaan berdasarkan beberapa syarat, bukan hanya kata kunci. Dalam Vue.js, kita boleh menggunakan sifat yang dikira dan arahan v-bind untuk melaksanakan pertanyaan bersyarat. Berikut ialah contoh:

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

Dalam kod di atas, kami telah menambah kotak lungsur untuk memilih kategori pertanyaan. Berdasarkan kata kunci yang dimasukkan dan kategori yang dipilih, kami menggunakan atribut terkira filteredList untuk menapis item data yang memenuhi syarat.

Ringkasan

Artikel ini memperkenalkan cara melaksanakan pertanyaan dan carian data dalam rangka kerja Vue.js dan menyediakan contoh kod khusus. Melalui kaedah di atas, kami boleh mengendalikan pelbagai pertanyaan dan keperluan carian secara fleksibel. Semoga membantu pembaca.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pertanyaan data dan carian dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!