[DAY21]跟 Vue.js 认识的30天 - Vue 过滤器(`filter`)

这是一个在 Vue 3 被拿掉的功能，但还是来了解一下。

`filter` 用途及用法

filter 是让双花括号({{}})或 v-bind 表达式中的值通过 | 再来让 filter 作用，写法如下：

<!-- 在 Mustache 中 -->
{{ message | filterName }}

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

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

// 全域
//value指的是双花括号(`{{}}`)或 `v-bind` 表达式中的值
Vue.filter('filterName',value=>{
  //...
})

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

透过上面的方法创建 filter ，来让双花括号({{}})或 v-bind 表达式中的值被代入该 filter 後，返回新的值。

被代入 `filter` 的参数

多个 filter

<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 值。

代入多个引数

<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：DAY21 | 跟 Vue.js 认识的30天 - Vue 过滤器(filter)

参考资料

Vue.js - 过滤器