/

Vue.js過濾器

Vue.js過濾器

過濾器是Vue.js中的一種功能，它讓我們可以對模板插值中使用的值應用格式化和轉換。

過濾器是由Vue組件提供的一種功能，它允許您對模板動態數據的任何部分應用格式化和轉換。

它們不會更改組件數據或其他任何內容，但它們只會影響輸出。

舉個例子，假設您要打印一個名字：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <p>嗨 {{ name }}！</p>
</template>

<script>
export default {
 data() {
 return {
 name: 'Flavio'
 }
 }
}
</script>

如果您想要檢查name是否包含值，如果沒有則打印“there”，這樣我們的模板將打印“嗨 there！”，該怎麼辦呢？

輸入過濾器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
 <p>嗨 {{ name | fallback }}！</p>
</template>

<script>
export default {
 data() {
 return {
 name: 'Flavio'
 }
 },
 filters: {
 fallback: function(name) {
 return name ? name : 'there'
 }
 }
}
</script>

注意使用過濾器的語法，即| 過濾器名稱。如果您熟悉Unix，這就是Unix管道運算符，它用於將操作的輸出作為輸入傳遞給下一個操作。

組件的filters屬性是一個對象。單個過濾器是一個接受值並返回另一個值的函數。

返回的值是實際在Vue.js模板中打印的值。

當然，該過濾器可以訪問組件的數據和方法。

過濾器的一個好的使用案例是什麼？

  • 轉換字符串，例如使其變大寫或變小寫
  • 格式化價格

上面您看到了一個簡單的過濾器示例：{{ name | fallback }}。

過濾器可以串聯，通過重複使用管道語法：

1
{{ name | fallback | capitalize }}

這首先應用“fallback”過濾器，然後應用“capitalize”過濾器（我們沒有定義它，但您可以嘗試創建一個！）。

高級過濾器還可以使用正常的函數參數語法接受參數：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
 <p>你好 {{ name | prepend('Dr.') }}</p>
</template>

<script>
export default {
 data() {
 return {
 name: 'House'
 }
 },
 filters: {
 prepend: (name, prefix) => {
 return `${prefix} ${name}`
 }
 }
}
</script>

如果您向過濾器傳遞參數，則傳遞給過濾器函數的第一個參數總是模板插值中的項目（在這種情況下是name），其後是您傳遞的顯式參數。

您可以使用逗號分隔它們來使用多個參數。

請注意我使用了箭頭函數。通常情況下，我們不在方法和計算屬性中使用箭頭函數，因為它們幾乎總是引用this以訪問組件數據，但在這種情況下，過濾器不需要訪問this，而是通過參數接收了所需的所有數據，因此我們可以安全地使用更簡單的箭頭函數語法。

此套件里有很多預製過濾器供您在模板中直接使用，包括capitalize，uppercase，lowercase，placeholder，truncate，currency，pluralize等等。

tags: [“Vue.js”, “過濾器”, “模板插值”, “管道操作符”, “轉換字符串”, “格式化”, “參數”]