Cara mencipta fungsi penapis global dalam dokumentasi Vue

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular dan digunakan secara meluas dalam pembangunan bahagian hadapan. Antaranya, penapis adalah bahagian yang sangat penting dalam Vue.js. Ia boleh membantu pembangun memproses data sebelum menjadikannya untuk mencapai pelbagai kesan. Artikel ini akan memperkenalkan cara membuat fungsi penapis global dalam Vue.js.

Penapis dalam Vue.js adalah serupa dengan fungsi, menerima parameter (biasanya data yang perlu ditapis) dan mengembalikan hasil yang diproses. Fungsi penapis global boleh ditakrifkan melalui kaedah Vue.filter untuk menjadikannya tersedia sepanjang aplikasi. Berikut ialah sintaks asas Vue.filter:

Vue.filter('filterName', function(value) {
  // 处理逻辑
  return processedValue;
});

Antaranya, 'filterName' ialah nama penapis, dan nilai ialah data yang perlu ditapis. Dalam fungsi, kami boleh melakukan pelbagai operasi tersuai, seperti penggantian rentetan, pemformatan data, dsb. Akhirnya, kita perlu mengembalikan hasil yang diproses.

Anda boleh menggunakan penapis global yang ditakrifkan dengan cara berikut:

{{ data | filterName }}

di mana data ialah data yang perlu ditapis dan filterName ialah nama bagi fungsi penapis yang ditentukan. Kaedah penggunaan dalam templat adalah sangat mudah Anda hanya perlu meletakkan data untuk ditapis selepas simbol bar menegak (|), dan kemudian tulis nama penapis. Perlu diingatkan bahawa penapis hendaklah semudah mungkin supaya tidak menjejaskan prestasi pengikatan data.

Di bawah kami menggunakan contoh khusus untuk menunjukkan cara membuat dan menggunakan penapis global. Katakan kita mempunyai data tarikh dan kita perlu memformatkannya dalam bentuk "YYYY-MM-DD". Kemudian kita boleh mentakrifkan penapis seperti berikut:

Vue.filter('formatDate', function(value) {
  var date = new Date(value);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();

  // 将数字转为字符串，并在前面补“0”以达到位数的要求
  month = month.toString().padStart(2, '0');
  day = day.toString().padStart(2, '0');

  // 返回格式化之后的日期字符串
  return year + '-' + month + '-' + day;
});

Selepas mentakrifkannya, kita boleh menggunakannya dalam templat:

<h1>{{ date | formatDate }}</h1>

Kesannya ialah menukar format tarikh asal (seperti: 1581072000000) kepada " 2020-02-07" dan memaparkannya ke dalam halaman.

Ringkasnya, menggunakan penapis global boleh meningkatkan kecekapan pembangunan kami dengan ketara dalam Vue.js Kami boleh mentakrifkan pelbagai fungsi penapis dalam skop global dan kemudian mengaksesnya apabila diperlukan. Ini mencapai kesan penggunaan semula kod. Pada masa yang sama, berhati-hati untuk tidak menulis fungsi penapis yang terlalu kembung dan kompleks untuk mengelakkan menjejaskan prestasi halaman.

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