Cara menggunakan penapis untuk memproses data dalam Vue

Vue ialah rangka kerja bahagian hadapan berdasarkan corak MVVM Ia mempunyai ciri seperti pengikatan data dua hala, komponenisasi dan modularisasi, memberikan kemudahan yang hebat kepada pembangun. Dalam Vue, penapis ialah alat yang sangat praktikal Ia boleh melakukan satu siri pemprosesan dan penukaran pada data, dan kemudian memaparkan data yang diproses Ini boleh mengurangkan jumlah kod dan meningkatkan kebolehbacaan dan kejelasan kod . Artikel ini akan menerangkan cara menggunakan penapis untuk memproses data dalam Vue.

1. Definisi dan penggunaan penapis

Penapis boleh difahami sebagai fungsi yang digunakan untuk memproses format data tertentu Ia boleh menerima satu parameter atau berbilang parameter untuk memproses data dan operasi dilakukan, dan hasil yang diproses akhirnya dikembalikan. Penapis dalam Vue dipanggil menggunakan sintaks {{}} dan penapis boleh dipanggil melalui aksara paip "|" dalam templat.

Contohnya:

<div>{{ message | uppercase }}</div>

Dalam kod di atas, kami menggunakan penapis ucapher pada data mesej dan menukar data kepada huruf besar untuk output.

2. Definisi dan pendaftaran penapis

Menggunakan penapis dalam Vue memerlukan penentuan dan pendaftaran penapis terlebih dahulu, yang dicapai melalui kaedah Vue.filter.

Contohnya:

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})

Dalam kod di atas, kami mentakrifkan penapis bernama huruf besar, yang menerima nilai parameter, menukar nilai kepada huruf besar dan akhirnya mengembalikan hasil yang ditukar .

Selepas penapis ditakrifkan, kita perlu mendaftarkannya dengan contoh Vue untuk menggunakannya dalam templat. Contohnya:

<div>{{ message | uppercase }}</div>

3. Parameter penapis dan penggunaan berbilang penapis

Penapis dalam Vue boleh menerima satu atau lebih parameter, seperti menggunakan parameter yang memaparkan dua tempat perpuluhan:

Vue.filter('fixed', function (value, n) {
  return value.toFixed(n)
})

Dalam kod di atas, kami mentakrifkan penapis bernama tetap, yang menerima dua nilai parameter dan n, dengan n mewakili bilangan digit selepas titik perpuluhan. Apabila menggunakan penapis dalam templat, anda perlu lulus dua parameter, contohnya:

<p>{{ price | fixed(2) }}</p>

Dalam Vue, anda juga boleh menggunakan berbilang penapis. Sebagai contoh, kami ingin menukar nama kepada huruf besar dan memintas tiga aksara pertama pada masa yang sama:

Vue.filter('uppercase', function(value) {
  return value.toUpperCase()
})
Vue.filter('truncate', function(value, length) {
  if (value.length > length) {
    return value.substring(0, length - 1) + '...'
  } else {
    return value
  }
})

Dalam kod di atas, kami telah menentukan dua penapis masing-masing, satu adalah huruf besar untuk menukar kepada huruf besar , Satu lagi ialah memotong tiga aksara pertama. Susunan pelaksanaan penapis adalah dari kiri ke kanan Sebagai contoh, kita boleh menggabungkan dua penapis dengan cara berikut:

<p>{{ name | uppercase | truncate(3) }}</p>

4. Penapis tempatan dan penapis global

dalam Vue , kita boleh menentukan penapis tempatan dan global. Penapis tempatan hanya boleh digunakan pada templat dalam tika Vue semasa, manakala penapis global boleh digunakan dalam semua tika Vue.

Tentukan penapis setempat:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    uppercase: function (value) {
      return value.toUpperCase()
    }
  }
})

Dalam kod di atas, kami mentakrifkan penapis tempatan bernama huruf besar dalam contoh Vue.

Tentukan penapis global:

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})

Dalam kod di atas, kami menggunakan kaedah Vue.filter untuk mentakrifkan penapis global bernama huruf besar Penapis ini boleh digunakan dalam semua kejadian Vue.

Gunakan penapis global:

<p>{{ name | uppercase }}</p>

5 Ringkasan

Penapis dalam Vue ialah alat yang sangat praktikal yang boleh melakukan satu siri pemprosesan dan transformasi data , yang dipaparkan data lebih sesuai dengan keperluan paparan kami. Melalui artikel ini, kami menerangkan secara terperinci cara menggunakan penapis untuk memproses data dalam Vue, termasuk definisi penapis, pendaftaran, parameter, penggunaan berbilang penapis, penapis tempatan dan penapis global, dsb. Saya percaya bahawa untuk pembangun bahagian hadapan, artikel ini akan membantu. Jika anda ingin mengetahui lebih lanjut tentang Vue, anda boleh menyemak dokumentasi rasmi Vue dan berkongsi bahan dan pengalaman pembelajaran Vue yang lebih baik. Saya harap anda dapat mengekalkan semangat anda untuk bahagian hadapan dan mengikuti perkembangan zaman.

Atas ialah kandungan terperinci Cara menggunakan penapis untuk memproses data dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!