Aplikasi fungsi penapis dinamik dalam dokumen Vue

Vue ialah rangka kerja JavaScript berasaskan web yang digunakan untuk membina antara muka pengguna dinamik pada halaman web. Vue mempunyai kelebihan sebagai ringan, mudah dan mudah dipelajari serta amat disayangi oleh pembangun. Dalam Vue, fungsi penapis dinamik ialah fungsi yang sangat berguna, yang boleh membantu kami memproses dan menapis data. Artikel ini akan meneroka aplikasi fungsi penapisan dinamik dalam dokumen Vue.

1. Apakah fungsi penapis dinamik

Dalam Vue, fungsi penapis dinamik ialah fungsi yang digunakan untuk memproses teks. Ia boleh menukar mod paparan data asal melalui penapis. Biasanya, kami boleh menghantar data kepada penapis melalui aksara paip "|" dan kemudian memprosesnya. Contohnya:

dc6dce4a544fdca2df29d5ac0ea9906b{{ mesej | huruf besar }}16b28748ea4df4d9c2150843fecfba68

Dalam contoh di atas, kami menggunakan penapis bernama "huruf besar" untuk menukar teks Yang pertama huruf besar. Jadi bagaimana penapis ini ditakrifkan? Malah, kita boleh menggunakan fungsi penapis Vue untuk menentukan fungsi penapis dinamik. Contohnya:

penapis: {
gunakan huruf besar: function(value) {

if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);

}
}

Dalam contoh di atas, kami menentukan fail yang dipanggil Fungsi penapis "besarkan" boleh menukar parameter nilai ke dalam format huruf besar.

2. Senario penggunaan fungsi penapisan dinamik

Fungsi penapisan dinamik digunakan secara meluas Contohnya, fungsi penapisan dinamik boleh digunakan dalam pembentangan data, penapisan carian, penukaran tarikh, dsb.

(1) Persembahan data

Dari segi persembahan data, kita boleh menggunakan fungsi penapisan dinamik untuk memformat dan memaparkan data, seperti jumlah, nombor, tarikh, dsb. Contohnya:

dc6dce4a544fdca2df29d5ac0ea9906b{{ amaun | mata wang }}16b28748ea4df4d9c2150843fecfba68

Dalam contoh di atas, kami menggunakan fungsi penapis bernama "mata wang" untuk menapis amaun Format paparan dan menukarnya ke dalam format mata wang.

(2) Penapisan carian

Dari segi penapisan carian, kami boleh menggunakan fungsi penapisan dinamik untuk menapis data dalam keadaan yang ditetapkan. Contohnya:

a85d3762937a8d02c7e6a4057db95496
ff6d136ddc5fdfeffaf53ff6ee95f185
5634e4a0588217a04037caa50b7f4d52{{ item }}bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

Dalam contoh di atas, kami menggunakan fungsi penapis bernama "filterBy" untuk menapis tatasusunan item dan hanya memaparkan item yang mengandungi aksara carian The item rentetan.

(3) Penukaran tarikh

Dari segi penukaran tarikh, kita boleh menggunakan fungsi penapis dinamik untuk menukar tarikh ke dalam format yang ditentukan. Contohnya:

dc6dce4a544fdca2df29d5ac0ea9906b{{ tarikh | formatDate }}16b28748ea4df4d9c2150843fecfba68

Dalam contoh di atas, kami menggunakan fungsi penapis bernama "formatDate" untuk menukar tarikh Tukarkan tarikh kepada format yang ditentukan, seperti "TTTT/MM/DD".

3. Bagaimana untuk mentakrifkan fungsi penapisan dinamik

Dalam Vue, kami boleh mentakrifkan fungsi penapisan dinamik melalui definisi atau definisi global dalam komponen.

(1) Definisi global

Apabila mentakrifkan fungsi penapis secara global, kita perlu mentakrifkannya sebelum tika Vue dimulakan. Contohnya:

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

Dalam contoh di atas, kami menggunakan kaedah Vue.filter() untuk definisi global dan mentakrifkan fail bernama " gunakan huruf besar ” fungsi penapis.

(2) Definisi dalam komponen

Apabila mentakrifkan fungsi penapis dalam komponen, kita perlu mentakrifkannya dalam pilihan "penapis" komponen. Contohnya:

Vue.component('my-component', {
filters: {

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

},
template: 'dc6dce4a544fdca2df29d5ac0ea9906b{{ message | capitalize } }16b28748ea4df4d9c2150843fecfba68',
data: function () {

return {
  message: 'hello world'
}

}
})

Dalam contoh di atas, kita berada dalam pilihan "penapis" daripada komponen Fungsi penapis yang dipanggil "memodalkan" ditakrifkan. Dalam templat, kami menggunakan fungsi penapis untuk memproses data.

4. Ringkasan

Fungsi penapisan dinamik ialah fungsi yang sangat berguna dalam Vue, yang boleh membantu kami memproses dan menapis data. Artikel ini memperkenalkan definisi, senario penggunaan dan kaedah aplikasi bagi fungsi penapisan dinamik, dengan harapan dapat membantu pembangun.

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