Bộ lọc Vue.js

Bộ lọc là cách Vue.js cho phép chúng tôi áp dụng định dạng và chuyển đổi cho một giá trị được sử dụng trong phép nội suy mẫu.

Bộ lọc là một chức năng được cung cấp bởi các thành phần Vue cho phép bạn áp dụng định dạng và chuyển đổi cho bất kỳ phần nào của dữ liệu động mẫu của bạn.

Chúng không thay đổi dữ liệu thành phần hay bất cứ thứ gì, nhưng chúng chỉ ảnh hưởng đến đầu ra.

Giả sử bạn đang in tên:

<template>
  <p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

Nếu bạn muốn kiểm tra điều đó thì saonamethực sự có chứa một giá trị và nếu không in 'ở đó', để mẫu của chúng tôi sẽ in "Xin chào!"?

Nhập bộ lọc:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
filters: {
fallback: function(name) {
return name ? name : ‘there’
}
}
}
</script>

Lưu ý cú pháp để áp dụng bộ lọc, đó là| filterName. Nếu bạn đã quen thuộc với Unix, thì đó là toán tử Unix pipe, được sử dụng để chuyển đầu ra của một hoạt động làm đầu vào cho thao tác tiếp theo.

Cácfiltersthuộc tính của thành phần là một đối tượng. Bộ lọc đơn là một hàm chấp nhận một giá trị và trả về một giá trị khác.

Giá trị trả về là giá trị thực sự được in trong mẫu Vue.js.

Tất nhiên, bộ lọc có quyền truy cập vào dữ liệu thành phần và các phương thức.

Trường hợp sử dụng tốt cho bộ lọc là gì?

chuyển đổi một chuỗi, chẳng hạn như viết hoa hoặc viết thường
định dạng giá

Ở trên, bạn đã thấy một ví dụ đơn giản về bộ lọc:{{ name | fallback }}.

Các bộ lọc có thể được xâu chuỗi, bằng cách lặp lại cú pháp ống dẫn:

{{ name | fallback | capitalize }}

Điều này đầu tiên áp dụngfallbackbộ lọc, sau đócapitalizebộ lọc (mà chúng tôi không xác định, nhưng hãy thử tạo một bộ lọc!).

Bộ lọc nâng cao cũng có thể chấp nhận các tham số, sử dụng cú pháp tham số hàm thông thường:

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: ‘House’
}
},
filters: {
prepend: (name, prefix) => {
return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}
}
}
</script>

Nếu bạn chuyển các tham số cho một bộ lọc, thì tham số đầu tiên được truyền cho hàm bộ lọc luôn là mục trong nội suy mẫu (nametrong trường hợp này), theo sau là các tham số rõ ràng bạn đã chuyển.

Bạn có thể sử dụng nhiều tham số bằng cách phân tách chúng bằng dấu phẩy.

Lưu ý rằng tôi đã sử dụng một hàm mũi tên. Chúng tôi tránh hàm mũi tên trong các phương thức và thuộc tính tính toán nói chung vì chúng hầu như luôn tham chiếuthisđể truy cập dữ liệu thành phần, nhưng trong trường hợp này, bộ lọc không cần truy cập mà nhận tất cả dữ liệu nó cần thông qua các tham số và chúng ta có thể yên tâm sử dụng cú pháp hàm mũi tên đơn giản hơn.

Gói nàycó rất nhiều bộ lọc được tạo sẵn để bạn sử dụng trực tiếp trong các mẫu, bao gồmcapitalize,uppercase,lowercase,placeholder,truncate,currency,pluralizevà hơn thế nữa.

Tải xuống miễn phí của tôiSổ tay Vue

Bộ lọc Vue.js

Bộ lọc là cách Vue.js cho phép chúng tôi áp dụng định dạng và chuyển đổi cho một giá trị được sử dụng trong phép nội suy mẫu.

Các hướng dẫn vue khác: