iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 21

Day21 製作一個過濾器(filter)

在 Day18介紹插件時有提到,能透過插件來定義一個過濾器,那我們今天就來教大家如何製作一個過濾器吧。

自定義過濾器,我們常用來針對較為普遍文字重製,來客製化一個過濾器(在Angular叫做管道Pipe)。

而寫好的過濾器可以放在那些地方呢?1.{{插值綁定}}2.v-bind表示式

{{ message | capitalize }}
// or..
<div v-bind:id="rawId | formatId"></div>

過濾器的註冊方式可以在元件內透過選項filters局部定義,也可以在vue實例之前全局定義,當然也可以透過插件添加(參考Day18)。

// component option: filters 
export default {
    name:'demo',
    filters: {
      capitalize (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
}

// global filter setting
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // code...
})

過濾器也可以串聯使用:

{{ message | filterA | filterB }}

甚至於可以接參數,這裡,filterA被定義為接收三個參數的過濾器函數。其中message的值作為第一個參數,普通字符串'arg1'作為第二個參數,表達式arg2的值作為第三個參數。

{{ message | filterA('arg1', arg2) }}

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day20 自己的國家自己救,自訂義指令-Vue.directive
下一篇
Day 22介紹vue風格指南-寫作規範
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言