Pengenalan kepada fungsi penapis dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan pembangun alat yang sangat berkuasa untuk membina aplikasi web interaktif. Salah satu fungsi yang biasa digunakan dalam rangka kerja Vue ialah fungsi penapis. Dalam artikel ini, kami akan memperkenalkan fungsi penapis dalam dokumentasi Vue dan cara menggunakannya.

1. Apakah fungsi penapis Vue?

Fungsi penapis dalam Vue ialah fungsi yang digunakan untuk memformat teks. Ia boleh memproses data yang kami hantar ke templat dan kemudian mengeluarkan hasil yang diproses. Biasanya, kita boleh menggunakan fungsi penapis untuk memformat tarikh, nombor, rentetan, tatasusunan, dsb.

2. Cara menggunakan fungsi penapis Vue

Untuk menggunakan fungsi penapis Vue, kita perlu menggunakan kaedah pendaftaran global atau kaedah pendaftaran tempatan. Perkara berikut menerangkan cara menggunakan dua kaedah ini:

1. Daftar fungsi penapis secara global

Anda boleh mendaftarkan fungsi penapis secara global melalui fungsi Vue.filter() For contoh:

Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Kod di atas mendaftarkan fungsi penapis bernama capitalize, yang menerima parameter jenis rentetan, kemudian menggunakan huruf besar pada huruf pertamanya dan mengembalikan hasil yang diproses.

2. Pendaftaran tempatan fungsi penapis

Selain pendaftaran global, kami juga boleh menggunakan pendaftaran tempatan untuk mendaftarkan fungsi penapis dalam komponen tertentu. Contohnya:

Vue.component('my-component', {
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  template: '<div>{{ message | capitalize }}</div>',
  data: function() {
    return {
      message: 'hello world'
    }
  }
})

Kod di atas mentakrifkan komponen bernama my-component dan mentakrifkan fungsi penapis bernama capitalize dalam pilihan penapis komponen. Akhir sekali, pembolehubah $message digunakan dalam templat komponen, serta fungsi penapis huruf besar.

3. Tujuan fungsi penapis Vue

Fungsi penapis Vue boleh digunakan untuk pelbagai tujuan:

1. Tarikh Pemformatan <🎜. >

Vue.filter('formatDate', function(value) {
  const date = new Date(value)
  return date.toLocaleDateString()
})

Pemformatan nombor

Vue.filter('formatNumber', function(value) {
  return value.toString().replace(/B(?=(d{3})+(?!d))/g, ',')
})

Pemintasan rentetan

Vue.filter('truncate', function(value, maxLength = 150) {
  if (value.length <= maxLength) {
    return value
  }
  return value.slice(0, maxLength) + '...'
})

Atas ialah kandungan terperinci Pengenalan kepada fungsi penapis dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!