Mari kita bincangkan tentang cara menggunakan Penapis dalam Vue.js

Vue.js ialah rangka kerja bahagian hadapan yang popular yang telah menjadi pilihan pertama ramai pembangun. Ciri hebat Vue membolehkan kami menentukan gelagat kawalan dengan cara kami sendiri, yang mana Penapis ialah alat yang sangat berguna. Artikel ini akan menerangkan cara menggunakan Penapis dalam Vue.js.

Apakah itu Penapis Vue.js

Penapis ialah ciri Vue.js yang memformatkan output teks dalam templat. Ia boleh digunakan untuk menukar format teks atau menukarnya kepada format lain. Penapis membolehkan kami memproses teks dengan cara yang ringkas tanpa perlu melakukan operasi kompleks dalam kod.

Sintaks dan penggunaan Penapis

Penapis menggunakan aksara paip (‘|’) untuk memaipkan data ke dalam Penapis yang ditentukan. Penapis boleh digunakan di mana-mana dalam Vue, termasuk komponen Vue, arahan dan tika Vue.js.

Berikut ialah sintaks asas Penapis:

{{ expression | FilterName }}

Antaranya, ‘ungkapan’ ialah data yang ingin kami proses dan ‘FilterName’ ialah Penapis yang kami takrifkan.

Sebagai contoh, gunakan penapis huruf besar dalam Vue.js untuk menukar huruf pertama rentetan kepada huruf besar:

<template>
  <div>{{ name | capitalize }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'alice',
    };
  },
  filters: {
    capitalize: function(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
};
</script>

Dalam contoh di atas, nama huruf besar ditakrifkan Penapis, proses data nama supaya huruf pertama menjadi huruf besar.

Penapis yang disertakan dengan Vue.js

Vue.js mempunyai banyak Penapis terbina dalam. Berikut ialah beberapa Penapis terbina dalam yang biasa digunakan:

1. huruf besar: Tukar rentetan kepada huruf besar.

<template>
  <div>{{ name | uppercase }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'alice',
    };
  },
};
</script>

2. huruf kecil: Tukar rentetan kepada huruf kecil.

<template>
  <div>{{ name | lowercase }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'ALICE',
    };
  },
};
</script>

3. mata wang: Formatkan nombor menjadi mata wang.

<template>
  <div>{{ price | currency }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 20.5,
    };
  },
};
</script>

Penapis Tersuai

Dalam Vue.js, kami boleh memperibadikan Penapis dengan mudah untuk memenuhi keperluan khusus kami. Contohnya, buat Penapis berkod URL yang menggantikan ruang dengan tanda tambah.

<template>
  <div>{{ value | urlEncode }}</div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Hello World',
    };
  },
  filters: {
    urlEncode: function(value) {
      return encodeURIComponent(value).replace(/%20/g, '+');
    },
  },
};
</script>

Dalam kod di atas, kami mentakrifkan Penapis bernama urlEncode untuk memproses data "Hello World" dan akhirnya mengeluarkannya sebagai "Hello+World".

Ringkasan

Penapis ialah alat yang sangat berguna dalam Vue.js, membolehkan kami memproses teks output dengan cara yang ringkas dan berkesan. Artikel ini telah memperincikan sintaks dan penggunaan menggunakan Penapis dalam Vue.js, serta cara untuk menentukan Penapis kami sendiri. Dengan mempelajari dan menggunakan Penapis, kami boleh menguasai Vue.js dengan lebih baik dan mempercepatkan pembangunan kami.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan Penapis dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!