kata kunci pertanyaan kabur vue ditambah warna

Vue ialah rangka kerja JavaScript yang sangat popular Salah satu fungsi pentingnya ialah untuk membolehkan pembangun membina aplikasi web yang interaktif dan dinamik dengan mudah. Fungsi pertanyaan kabur Vue menjadikan carian sangat mudah dan juga boleh membantu pembangun meningkatkan pengalaman pengguna. Artikel ini terutamanya akan memperkenalkan kaedah pelaksanaan untuk menambah warna pada kata kunci dalam pertanyaan kabur Vue.

Pertanyaan kabur bermaksud bahawa dalam set data, dengan memasukkan syarat tertentu (seperti teks, nombor, tarikh, dll.), data yang sepadan dengan syarat boleh dicari. Dalam Vue, kita boleh menggunakan v-model untuk mengikat kotak input dan kemudian mencari melalui atribut yang dikira. Pelaksanaan khusus adalah seperti berikut:

<template>
  <div>
    <input type="text" v-model="keyword"/>
    <ul>
      <li v-for="item in filteredData">{{ highlight(item) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Orange'},
        {id: 4, name: 'Watermelon'},
        {id: 5, name: 'Grape'},
      ],
      keyword: ''
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => item.name.toLowerCase().includes(this.keyword.toLowerCase()))
    }
  },
  methods: {
    highlight (item) {
      const regex = new RegExp(this.keyword, 'gi')
      return item.name.replace(regex, `<span class="highlight">${this.keyword}</span>`)
    }
  }
}
</script>

<style>
.highlight {
  color: red;
}
</style>

Dalam kod di atas, kami mula-mula mengikat kotak input, dan kemudian menapis data melalui atribut yang dikira dalam arahan v-for untuk menapis data yang sepadan dengan kata kunci . Seterusnya, kami menentukan kaedah sorotan, menggunakan ungkapan biasa untuk membungkus kata kunci dalam teg HTML dan menambah gaya. Akhir sekali, dalam helaian gaya yang ditentukan, kami menetapkan warna untuk kelas kemuncak.

Perlu diambil perhatian bahawa untuk mengelakkan kelemahan XSS, arahan v-html Vue atau pustaka DOMPurify harus digunakan untuk memaparkan teg HTML.

Ringkasnya, fungsi pertanyaan kabur Vue sangat mudah, menjadikan carian sangat fleksibel, dan fungsi kata kunci serta warna boleh meningkatkan lagi pengalaman pengguna. Kaedah pelaksanaan juga agak mudah, anda hanya perlu menentukan kaedah highlight. Pembangun boleh membuat perubahan dan pengoptimuman mengikut keperluan mereka.

Atas ialah kandungan terperinci kata kunci pertanyaan kabur vue ditambah warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!