Bagaimana untuk melaksanakan fungsi carian dalam Vue

Dalam proses melaksanakan fungsi bahagian hadapan, fungsi carian adalah keperluan biasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue juga boleh menyokong pelaksanaan fungsi carian dengan baik. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi carian dalam Vue dan memberikan contoh kod khusus.

1. Persediaan

Sebelum melaksanakan fungsi carian, kita perlu menyediakan sumber data, iaitu beberapa data yang perlu dicari. Dalam contoh artikel ini, kami menggunakan tatasusunan yang mengandungi maklumat buku sebagai sumber data, dengan format berikut:

books: [
  {
    id: 1,
    title: 'Vue.js实战',
    author: '梁灏',
    publisher: '人民邮电出版社'
  },
  {
    id: 2,
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    publisher: '人民邮电出版社'
  },
  {
    id: 3,
    title: '深入浅出Node.js',
    author: '朴灵',
    publisher: '人民邮电出版社'
  },
  // 更多书籍信息...
]

Selain menyediakan sumber data, kami juga perlu menambah elemen input pada Vue untuk menerima input pengguna.

<input v-model="keyword" placeholder="请输入关键字进行搜索">

Antaranya, arahan v-model ialah cara untuk melaksanakan pengikatan data dua hala dalam Vue Ia menggabungkan nilai yang dimasukkan oleh pengguna dalam elemen input dengan kata kunciIkat atribut untuk mencapai kemas kini data segerak. v-model指令是Vue中实现双向数据绑定的一种方式，它将input元素中用户输入的值与Vue实例中的keyword属性进行绑定，实现数据的同步更新。

二、使用computed实现搜索

Vue提供了一种特殊的属性computed，可以方便地对数据进行处理，并在数据发生改变时自动更新。我们可以使用computed来实现搜索功能。

在本例中，我们可以定义一个computed属性filteredBooks，用于存储搜索之后的结果。

computed: {
  filteredBooks() {
    return this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

在上述代码中，我们将搜索关键字this.keyword与每一本书籍的标题、作者和出版社进行比对，如果匹配成功则返回对应的书籍信息。这里使用了数组的filter()方法，它会返回一个新数组，包含所有满足条件的元素。

最后，我们可以在页面中使用v-for指令循环渲染filteredBooks数组中的每一个元素。

<ul>
  <li v-for="book in filteredBooks" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

在上述代码中，v-for指令会将filteredBooks数组中的每一个元素渲染为一个li元素，并绑定一个唯一的key值。这里我们使用每一本书籍的id作为key值，保证每一个元素的唯一性。

三、使用watch实现搜索

除了computed属性外，Vue还提供了一种叫做watch的属性，可以实现“监听”数据的变化，并在数据变化时触发相应的操作。我们也可以利用watch属性来实现搜索功能。

在本例中，我们可以定义一个watch属性searchResult，在keyword属性变化时更新搜索结果。

watch: {
  keyword() {
    this.searchResult = this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

在上述代码中，keyword属性变化时会触发watch属性中的函数。我们将新的搜索结果存储在searchResult属性中，并在页面中使用v-for

2. Gunakan dikira untuk melaksanakan carian

Vue menyediakan atribut khas dikira, yang boleh memproses data dengan mudah dan mengemas kini secara automatik apabila data berubah. Kita boleh menggunakan computed untuk melaksanakan fungsi carian.

Dalam contoh ini, kita boleh mentakrifkan atribut yang dikira filteredBooks untuk menyimpan hasil selepas carian.

<ul>
  <li v-for="book in searchResult" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

Dalam kod di atas, kami membandingkan kata kunci carian kata kunci ini dengan tajuk, pengarang dan penerbit setiap buku Jika perlawanan berjaya, maklumat buku yang sepadan akan dikembalikan. Kaedah filter() tatasusunan digunakan di sini, yang akan mengembalikan tatasusunan baharu yang mengandungi semua elemen yang memenuhi syarat.

Akhir sekali, kita boleh menggunakan arahan v-for dalam halaman untuk melingkari setiap elemen dalam tatasusunan filteredBooks.

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          title: 'Vue.js实战',
          author: '梁灏',
          publisher: '人民邮电出版社'
        },
        {
          id: 2,
          title: 'JavaScript高级程序设计',
          author: 'Nicholas C.Zakas',
          publisher: '人民邮电出版社'
        },
        {
          id: 3,
          title: '深入浅出Node.js',
          author: '朴灵',
          publisher: '人民邮电出版社'
        },
        // 更多书籍信息...
      ],
      keyword: ''
    }
  },
  computed: {
    filteredBooks() {
      return this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
              book.author.indexOf(this.keyword) !== -1 ||
              book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  },
  /*watch: {
    keyword() {
      this.searchResult = this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
               book.author.indexOf(this.keyword) !== -1 ||
               book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  }*/
}
</script>

Dalam kod di atas, arahan v-for akan menjadikan setiap elemen dalam tatasusunan filteredBooks sebagai elemen li dan mengikat nilai kunci unik. Di sini kami menggunakan id setiap buku sebagai nilai utama untuk memastikan keunikan setiap elemen. 🎜🎜3 Gunakan jam tangan untuk melaksanakan carian🎜🎜Selain atribut yang dikira, Vue juga menyediakan atribut yang dipanggil watch, yang boleh "memantau" perubahan data dan mencetuskan tindakan yang sepadan apabila data itu beroperasi . Kami juga boleh menggunakan atribut watch untuk melaksanakan fungsi carian. 🎜🎜Dalam contoh ini, kita boleh mentakrifkan atribut jam tangan searchResult untuk mengemas kini hasil carian apabila atribut keyword berubah. 🎜rrreee🎜Dalam kod di atas, apabila atribut keyword berubah, fungsi dalam atribut jam tangan akan dicetuskan. Kami menyimpan hasil carian baharu dalam atribut searchResult dan gelung melalui halaman untuk memaparkan hasil carian menggunakan arahan v-for. 🎜rrreee🎜4. Lengkapkan kod sampel🎜🎜Kini, kami telah berjaya melaksanakan fungsi carian dalam Vue. Di bawah ialah contoh kod lengkap. 🎜rrreee🎜Di atas ialah kod sampel yang menggunakan atribut yang dikira untuk melaksanakan fungsi carian. Jika anda perlu menggunakan atribut jam tangan untuk melaksanakan fungsi carian, cuma nyahkomen kod yang berkaitan. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan cara melaksanakan fungsi carian dalam Vue dan menyediakan contoh kod khusus. Sama ada anda menggunakan atribut yang dikira atau atribut jam tangan, fungsi carian boleh dilaksanakan dengan berkesan. Dalam aplikasi praktikal, kita boleh memilih kaedah yang sesuai mengikut keperluan khusus untuk mencapai pengalaman pengguna yang lebih baik. 🎜

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