Petunjuk

Filter

Vue.js memungkinkan Anda untuk menentukan filter yang dapat digunakan untuk memformat tulisan. Filter dapat digunakan di dua tempat: interpolasi mustache dan ekspresi v-bind (terakhir didukung di versi 2.1.0+). Filter harus ditambahkan di akhir ekspresi JavaScript dengan simbol “pipe” ( | ):

<!-- di mustaches -->
{{ message | capitalize }}

<!-- di v-bind -->
<div v-bind:id="rawId | formatId"></div>

Anda dapat menentukan filter lokal dalam opsi komponen:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

atau menentukan filter secara global sebelum membuat Vue instance:

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Di bawah ini adalah contoh dari filter capitalize yang kami gunakan:

{{ message | capitalize }}

Filter selalu menerima nilai ekspresi (dari rantai sebelumnya) sebagai argumen pertama. Dalam contoh di atas, filter capitalize akan menerima nilai message sebagai argumen.

Filter bisa berantai:

{{ message | filterA | filterB }}

Pasa kasus ini, filterA, didefinisikan dengan satu argumen, yang akan menerima nilai message, kemudian filterB akan dipanggil dengan hasil dari filterA yang akan dioper ke filterB sebagai satu argumen.

Filter adalah function JavaScript, oleh karena itu mereka dapat mengambil argumen:

{{ message | filterA('arg1', arg2) }}

Di sini filterA didefinisikan sebagai function yang mengambil tiga argumen. Nilai message yang akan dioper ke argumen pertama. String 'arg1' yang akan dioper ke filterA sebagai argumen kedua, dan nilai dari ekspresi arg2 yang akan dievaluasi dan dioper ke argumen ketiga.

← Plugin Komponen Berkas Tunggal →
Menemukan kesalahan atau ingin berkontribusi pada dokumentasi? Sunting halaman ini di Github!