DAY21 | 跟 Vue.js 認識的30天 - Vue 過濾器(`filter`)

發表於 更新於 分類於 ，

這是一個在 Vue 3 被拿掉的功能，但還是來了解一下。

filter 用途及用法

filter 是讓雙花括號或 v-bind 表達式中的值通過 | 再來讓 filter 作用，寫法如下：

1
2
3
4
5
<!-- 在 Mustache 中 -->
{{ message | filterName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="searchText | filterName"></div>

message 或 searchText 都會被 | 後的 filter 作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 全域
//value指的是雙花括號或 `v-bind` 表達式中的值
Vue.filter('filterName',value=>{
  //...
})

//區域
new Vue({
  filters:{
    filterName(value){
      //...
    }
  }
})

透過上面的方法創建 filter ，來讓雙花括號({{}} )或 v-bind 表達式中的值被代入該 filter 後，返回新的值。

被代入 filter 的參數

多個 filter

1
2
3
4
5
6
7
8
9
10
<p>message : {{ message | uppercase | filterName(1,5) }}</p>

<script>
Vue.filter('uppercase',value=>{
  return value.toUpperCase()
})
Vue.filter('filterName',(value,param1,param2)=>{
  return value.slice(param1,param2)
})
</script>

message 會先被代入 uppercase() 執行，得到 A 值，再將得到的 A 值代入 filterName() 裡去執行，最後得到並顯示 B 值。

代入多個引數

1
2
3
4
5
6
7
<p>sliceMsg : {{ sliceMsg | filterName(arg1,arg2) }}</p>

<script>
Vue.filter('filterName',(value,param1,param2)=>{
  return value.slice(param1,param2)
})
</script>

filterName 本身是個函數，所以可以有其他參數，但必須注意 sliceMsg 會作為 filterName 的第一個引數(value)，而 arg1 、 arg2 分別為 filterName 的第二個跟第三個引數來執行。

filter 感覺比較簡單，就到這結束了！

Demo

See the Pen DAY21 | 跟 Vue.js 認識的30天 - Vue 過濾器(`filter`) by Celeste6666 (@celeste6666) on CodePen.

參考資料

Vue.js - 过滤器