Cara menggunakan penapis dan melaksanakan penapis tersuai dalam Vue

Vue ialah rangka kerja JavaScript popular yang digemari terutamanya oleh pembangun bahagian hadapan kerana kemudahan pembelajaran, kemudahan penggunaan dan fleksibilitinya. Dalam Vue, penapis ialah fungsi yang sangat biasa yang boleh membantu kami mengendalikan penukaran dan pemformatan beberapa data, dengan itu menjadikan pembentangan data lebih jelas dan lebih cantik. Artikel ini akan memperkenalkan penggunaan penapis dalam Vue dan cara melaksanakan penapis tersuai.

1. Penggunaan penapis dalam Vue

Penapis dalam Vue boleh digunakan untuk menapis data yang akan dipaparkan dan ia boleh ditakrifkan melalui penapis global dan penapis tempatan. Penapis global boleh digunakan dalam mana-mana komponen aplikasi, manakala penapis tempatan hanya boleh digunakan dalam komponen semasa.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan penapis dalam Vue:

<div id="app">
  <p>原始字符串：{{ message }}</p>
  <p>过滤后字符串：{{ message | reverse }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  filters: {
    reverse: function(value) {
      return value.split('').reverse().join('')
    }
  }
})
</script>

Dalam kod di atas, kami telah menentukan terbalik penapis global yang menerima rentetan sebagai hujah dan mengembalikan hasil penyongsangan ia. Dalam templat, kami menggunakan simbol | untuk memanggil penapis ini dan data mesej diproses oleh penapis sebelum memaparkannya.

2. Kaedah pelaksanaan penapis tersuai

Dalam Vue, kami boleh menyesuaikan penapis untuk memenuhi keperluan khusus. Di bawah ialah contoh penapis tersuai yang menukar rentetan tarikh kepada tarikh dalam format yang ditentukan.

<div id="app">
  <p>原始日期：{{ date }}</p>
  <p>转换后日期：{{ date | dateFormat('yyyy-MM-dd') }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    date: '2021/01/01'
  },
  filters: {
    dateFormat: function(value, format) {
      var date = new Date(value)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()

      format = format.replace('yyyy', year)
      format = format.replace('MM', pad(month))
      format = format.replace('dd', pad(day))
      format = format.replace('hh', pad(hour))
      format = format.replace('mm', pad(minute))
      format = format.replace('ss', pad(second))

      return format
    }
  }
})

function pad(number) {
  return number < 10 ? '0' + number : number
}
</script>

Dalam kod di atas, kami mentakrifkan separa penapis dateFormat, yang menerima dua parameter, satu ialah rentetan tarikh dan satu lagi ialah format tarikh. Di dalam fungsi penapis, kami menukar rentetan kepada tarikh melalui objek Tarikh dalam JavaScript dan menggabungkannya mengikut format yang ditentukan. Antaranya, kami menggunakan pad fungsi pad sifar untuk menambah sifar pada hadapan bulan, hari, jam, minit dan saat bagi satu nombor.

Format penapis tersuai adalah seperti berikut:

filters: {
  filterName: function(value[, arg1, arg2, ...]) {
    // filter function body
    return filteredValue
  }
}

Antaranya, filterName ialah nama penapis, nilai ialah data yang akan ditapis dan arg1, arg2, dsb. . adalah parameter pilihan Gunakan Untuk menghantar data tambahan atau format tetapan, dsb. Fungsi penapis boleh mengubah data input dan mengembalikan hasil yang ditapis.

Ringkasan:

Dalam artikel ini, kami mempelajari cara menggunakan penapis dalam Vue dan cara melaksanakan penapis tersuai. Sama ada penapis global atau penapis tempatan, ia boleh membantu kami memproses data dan menjadikannya lebih cantik dan boleh dibaca. Kaedah pelaksanaan penapis tersuai juga sangat mudah Anda hanya perlu menentukan fungsi mengikut format penapis. Semoga artikel ini bermanfaat kepada semua.

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