Tutorial asas VUE3: Gunakan penapis Vue.js untuk merangkum data

Vue.js ialah rangka kerja JavaScript yang ringan dengan siri ciri dan fungsi untuk meningkatkan kecekapan pembangunan aplikasi web. Vue3, sebagai versi terkini Vue.js, menyediakan pembangun dengan lebih banyak ciri dan fungsi, terutamanya untuk penapisan dan pengisihan data. Vue.js boleh merangkum dan melaraskan data melalui penapis. Artikel ini akan memperkenalkan secara terperinci cara menggunakan penapis Vue.js untuk merangkum data.

1. Apakah penapis Vue.js?

Penapis Vue.js ialah teknologi yang boleh digunakan untuk memformat data {{ungkapan}} dalam templat Vue. Penapis adalah serupa dengan sistem saluran paip yang menerima data input, memprosesnya dan akhirnya mengeluarkan data yang diproses ke templat. Penapis Vue.js sangat fleksibel dan boleh menyesuaikan diri dengan kebanyakan keperluan pembangunan.

2. Bagaimana untuk menggunakan penapis Vue.js?

Penapis Vue.js boleh dibuat melalui kaedah penapis pada tika Vue.js. Vue.js menggunakan simbol paip (|) untuk mewakili penapis data, seperti yang ditunjukkan di bawah:

{{ penapisan 2 | ... }}

Formula di atas mewakili, Gunakan penapis penapis1 pada data ungkapan dahulu, kemudian hantar output ke dalam penapis2 dan teruskan pemprosesan sehingga semua penapis telah digunakan.

2.1 Contoh penapis Vue.js ringkas

Contoh berikut menunjukkan cara menggunakan penapis Vue.js untuk melaraskan format tarikh. Dalam contoh berikut, parameter Tarikh mewakili tarikh tertentu dan dateFormat mewakili rentetan format. Parameter Tarikh perlu menjadi objek Tarikh JavaScript atau anda boleh menggunakan pustaka tarikh seperti moment.js.

Vue.filter('dateFormat', function (Date, dateFormat) {
  return moment(Date).format(dateFormat);
});

var app = new Vue({
  el: '#app',
  data: {
    myDate: '2017-04-12',
    format: 'MM/DD/YYYY'
  }
})

Dalam kod HTML, kami boleh menggunakan penapis dateFormat oleh:

<div id="app">
  <p>Date: {{myDate | dateFormat(format)}}</p>
</div>

Dalam kod di atas, kami telah menggunakan penapis tarikhFormat dan lulus format sebagai parameter untuk ditapis. Oleh itu, kami akan mendapat tarikh dalam format 04/12/2017.

2.2 Contoh Penapis Komposit

Berbilang penapis Vue.js boleh digunakan bersama melalui "paip" (|), seperti ditunjukkan di bawah:

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('');
});

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

Vue.filter('reverseAndCapitalize', function (value) {
  return this.reverse(this.capitalize(value));
});

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

di atas Dalam kod, kami mentakrifkan tiga penapis: reverse, capitalize dan reverseAndCapitalize, dengan reverseAndCapitalize ialah penapis kompaun yang menggabungkan songsang dan capitalize melalui saluran paip. Dalam kod HTML, kita boleh menggunakan penapis reverseAndCapitalize dengan cara berikut:

<div id="app">
  <p>Message: {{ message | reverseAndCapitalize }}</p>
</div>

Dalam kod di atas, kita mula-mula menggunakan penapis huruf besar dan kemudian membalikkan penapis untuk menukar output kepada DLROW OLLEH.

3. Ringkasan

Penapis Vue.js ialah alat pemprosesan data yang sangat berkuasa yang boleh memformat, melaraskan dan mengisih data melalui penapis. Dalam artikel ini, kami memperkenalkan asas penapis Vue.js dan menyediakan beberapa kes penggunaan untuk menjelaskan lagi aplikasi penapis. Jika anda ingin mengetahui lebih lanjut tentang Vue.js, anda boleh menyemak dokumentasi rasmi Vue.js untuk mendapatkan butiran lanjut tentang penapis dan ciri lain.

Atas ialah kandungan terperinci Tutorial asas VUE3: Gunakan penapis Vue.js untuk merangkum data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!