Cara menggunakan penapis TypeScript dalam Vue

Dengan peningkatan berterusan teknologi pembangunan bahagian hadapan, semakin banyak teknologi baharu telah diperkenalkan ke dalam kerja pembangunan kami, Vue.js dan TypeScript sudah pasti merupakan dua teknologi yang paling popular. Artikel ini akan memperkenalkan cara menggunakan penapis TypeScript dalam Vue.js.

1. Prinsip penapis

Penapis penapis yang disediakan dalam Vue.js digunakan untuk memformat data, serupa dengan penapis paip dalam Angular. Prinsip pelaksanaannya adalah berdasarkan fungsi terbina dalam Array.prototype.filter() bahasa JavaScript Fungsi ini menerima fungsi sebagai parameter dan mengembalikan tatasusunan baharu yang memenuhi syarat yang ditetapkan.

Dalam Vue.js, kami boleh memformat data dengan mentakrifkan fungsi sebagai parameter penapis Fungsi ini akan menerima data yang perlu diformatkan.

2. Cara menggunakan penapis dalam Vue.js

Terdapat dua cara untuk menggunakan penapis dalam Vue.js, satu penapis global dan satu lagi penapis tempatan .

2.1 Penapis global

Penapis global ditakrifkan pada pembina Vue, serupa dengan Vue.component() dan Vue.directive(), dan boleh digunakan dalam skop global. Kod untuk mentakrifkan penapis global adalah seperti berikut:

Vue.filter('filterName', function(value) {
  // 这里实现过滤器的具体逻辑
})

Pada ketika ini, kita boleh menggunakan penapisName penapis dalam semua kejadian Vue.

2.2 Penapis tempatan

Penapis tempatan ditakrifkan dalam komponen Vue dan hanya boleh digunakan di dalam komponen. Kod untuk mentakrifkan penapis setempat adalah seperti berikut:

export default {
  // ...
  filters: {
    filterName(value) {
      // 这里实现过滤器的具体逻辑
    }
  }
}

Jika kami memerlukan berbilang penapis dalam komponen Vue kami, kami boleh mentakrifkannya seperti berikut:

export default {
  // ...
  filters: {
    filter1(value) {
      // ...
    },
    filter2(value) {
      // ...
    }
  }
}

3. Vue Menggunakan TypeScript untuk mentakrifkan penapis dalam .js

Menggunakan TypeScript untuk mentakrifkan penapis dalam Vue.js pada asasnya adalah sama seperti menggunakan JavaScript untuk mentakrifkan penapis, kecuali kita perlu mengisytiharkan jenis pada parameter dan mengembalikan nilai fungsi, jadi Anda boleh menikmati pemeriksaan jenis TypeScript dan gesaan pintar semasa pembangunan.

Berikut ialah kod sampel yang menunjukkan cara mentakrifkan penapis dalam Vue.js menggunakan TypeScript:

import Vue from 'vue';

interface IUser {
  name: string;
  age: number;
}

Vue.filter('userInfo', (value: IUser) => `${value.name}（${value.age}岁）`);

Kami mentakrifkan penapis global bernama userInfo yang menerima jenis parameter IUser dan mengembalikan jenis rentetan.

4. Menggunakan penapis

Kaedah menggunakan penapis dalam templat Vue.js adalah sangat mudah Anda hanya perlu memanggil penapis melalui simbol "|". data terikat Boleh.

Sebagai contoh, jika kita ingin menukar nombor kepada format mata wang, kita boleh menulisnya seperti ini:

<p>{{ price | currency }}</p>

harga mewakili data yang perlu diformatkan dan mata wang mewakili nama penapis global atau tempatan yang kami tentukan .

5. Ringkasan

Menggunakan penapis dalam aplikasi Vue.js boleh memudahkan kami memformat data dan memaparkan paparan yang lebih cantik. Digabungkan dengan TypeScript, kami boleh menikmati kemudahan pemeriksaan jenis dan gesaan pintar semasa proses pembangunan.

Sudah tentu, premisnya ialah kita perlu terlebih dahulu memahami prinsip dan penggunaan penapis sebelum kita boleh menggunakannya dengan lebih fleksibel untuk memenuhi pelbagai keperluan pembangunan kita.

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