Filter trong Vuejs

Trong bài học này chúng ta sẽ tìm hiểu về các filter (bộ lọc) được định nghĩa trong Vue để áp dụng các định dạng văn bản thường gặp. Filter sẽ được đặt ở cuối một biểu thức Javascript và biểu thị bằng kí hiệu |:

Cú pháp Filte

<!-- trong thẻ mustache -->
{{ message | capitalize }}
<!-- trong v-bind -->
<div v-bind:id="rawId | formatId"></div>

Bạn có thể định nghĩa filter ở cấp cục bộ trong tùy chọn của một component:

filters: {
  /** Viết hoa chữ đầu tiên */
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

hoặc định nghĩa ở cấp toàn cục trước khi khởi tạo một đối tượng Vue:

/** Viết hoa chữ đầu tiên */
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})


new Vue({
  // ...
})

Hàm filter luôn nhận giá trị của biểu thức làm tham số đầu tiên. Trong ví dụ trên, hàm capitalize sẽ nhận tham số đầu tiên là giá trị của message.

Nối các filter

Ta cũng có thể nối các filter với nhau:

{{ message | filterA | filterB }}

Trong ví dụ này, hàm filterA sẽ nhận giá trị của message làm tham số, sau đó hàm filterB sẽ được gọi với tham số là giá trị trả về của filterA.

Vì đơn giản chỉ là hàm JavaScript nên filter có thể nhận tham số:

{{ message | filterA('value 1', arg2) }}

Ở đây filterA được định nghĩa dưới dạng một hàm nhận vào ba tham số theo thứ tự sau:

1. Giá trị của message
2. Chuỗi 'value 1'
3. Giá trị của biểu thức arg2