iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

0
自我挑戰組

跟 VueJS 認識的30天系列 第 21

[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>

messagesearchText 都會被 | 後的 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),而 arg1arg2 分別為 filterName 的第二個跟第三個引數來執行。

filter 感覺比較簡單,就到這結束了!

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

參考資料

Vue.js - 过滤器


上一篇
[DAY20]跟 Vue.js 認識的30天 - Vue 插件(Plugin)
系列文
跟 VueJS 認識的30天21

尚未有邦友留言

立即登入留言