Rumah > hujung hadapan web > View.js > Cara menggunakan fungsi penapis dalam vue

Cara menggunakan fungsi penapis dalam vue

下次还敢
Lepaskan: 2024-04-27 23:39:36
asal
666 orang telah melayarinya

Fungsi penapis Vue.js digunakan untuk memformat data dan memaparkannya dalam format tertentu dalam paparan Ia boleh menerima fungsi penukaran sebagai parameter. Penggunaan: {{ nilai |. Nama penapis }}. Berbilang penapis boleh disambungkan secara bersiri dan penapis tersuai boleh didaftarkan pada contoh atau secara global.

Cara menggunakan fungsi penapis dalam vue

Bagaimana untuk menggunakan fungsi penapis dalam Vue.js

Soalan: Apakah penggunaan fungsi penapis dalam Vue.js?

Jawapan:
Fungsi penapis Vue.js digunakan untuk memformat data dan memaparkannya dalam format tertentu dalam paparan. Ia menerima sebagai hujah fungsi yang menukar nilai input kepada nilai output yang dikehendaki.

Penggunaan:

<code class="html">{{ value | filterName }}</code>
Salin selepas log masuk

Di mana:

  • nilai ialah nilai data yang akan diformatkan. value 是要格式化的数据值。
  • filterName 是已注册的 filter 函数的名称。

示例:

将数字转换为货币格式:

<code class="html">{{ price | currency }}</code>
Salin selepas log masuk

将日期格式化为 dd/mm/yyyy:

<code class="html">{{ date | date('dd/mm/yyyy') }}</code>
Salin selepas log masuk

注册自定义 filter:

<code class="javascript">Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
});</code>
Salin selepas log masuk

上面定义了一个名为 capitalize 的 filter 函数,将第一个字母大写。

注意:

  • filter 函数只在视图中起作用,不会修改数据本身。
  • 可以使用 Vue.js 的管道运算符 (|
  • filterName ialah nama fungsi penapis yang didaftarkan. . code>huruf besar menggunakan huruf besar huruf pertama.
Nota: 🎜🎜🎜🎜fungsi penapis hanya berfungsi dalam paparan dan tidak mengubah suai data itu sendiri. 🎜🎜Anda boleh menggunakan operator paip Vue.js (|) untuk menggabungkan berbilang penapis. 🎜🎜 Penapis tersuai boleh didaftarkan dalam contoh Vue atau secara global. 🎜🎜

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

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan