Basis
Mirip dengan Petunjuk Kustom, filter khusus dapat didaftarkan dengan metode global vue.filter (), yang mengambil dua parameter: ID filter dan fungsi filter. Fungsi filter mengambil nilai sebagai parameter dan mengembalikan nilai yang dikonversi:
Vue.filter ('reverse', function (value) {return value.split (''). Reverse (). Gabungan ('')})<!-'abc' => 'cba'-> <span v-text = "pesan | reverse"> </span>
Fungsi filter dapat menerima sejumlah parameter:
Vue.filter ('wrap', function (value, begin, end) {return begin + value + end})<!-'halo' => 'sebelum halo setelah'-> <span v-text = "pesan | bungkus 'sebelum' 'setelah'"> </span>
Filter dua arah
Saat ini kami menggunakan filter untuk mengonversi nilai dari model sebelum menampilkannya di tampilan. Namun, juga dimungkinkan untuk mendefinisikan filter yang mengonversi nilai dari tampilan (elemen <sput>) sebelum menulisnya kembali ke model:
Vue.filter ('CurrencyDisplay', {// Model -> View // Memformat nilai sebelum memperbarui `<Input>` elemen baca: function (val) {return '$' +val.tofixed (2)}, // Lihat -> Model // Format Nilai Sebelum menulis kembali data tulis: fungsi (val, val, // val. '') mengembalikan isnan (angka)?Parameter dinamis
Jika parameter filter tidak dibungkus dengan kutipan, itu akan dihitung secara dinamis dalam lingkup VM saat ini. Juga, fungsi filter ini selalu menunjuk ke VM yang menyebutnya. Misalnya:
<input v-model = "userInput"> <span> {{msg | concat userInput}} </span> Vue.filter ('concat', function (value, input) {// `input` ===` this.userInput` value return + input})Contoh di atas relatif sederhana, dan Anda juga dapat menggunakan ekspresi untuk mencapai hasil yang sama, tetapi untuk logika yang lebih kompleks, lebih dari satu pernyataan diperlukan, dan Anda perlu meletakkannya di properti yang dihitung atau filter khusus.
Filter built-in filterby dan orderby filter/sortir array masuk berdasarkan keadaan saat ini dari vue instance yang berasal.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.