Vue中的過濾器(Filter)可以很好地處理金錢等數值型數據的顯示問題。
例如,我們有一個數據為20000的金錢數值,如果只是簡單的使用{{money}}渲染,那么顯示的結果是20000,此時顯然無法區分這是20000元或者20000美元。
這時候,我們可以使用Vue的過濾器來進行一些格式化的處理。下面是一個簡單的示例:
Vue.filter('money', function(value) { return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') })
這個過濾器的作用是將一個數值類型的數據格式化為以逗號隔開的金錢表示法。
例如,對于數據20000,使用money過濾器之后,顯示的結果為20,000.00。
在模板中使用這個過濾器非常簡單,只需要在渲染數據的時候添加一個管道符號“|”和過濾器名字即可:
{{ money | money }}
即可將數據通過money過濾器進行金錢格式化后再輸出。
除了金錢,使用Vue過濾器來處理其他格式化問題也很方便。只需要按照類似的方式定義一個符合需求的過濾器即可。
上一篇c json 查看