vue filter過濾器簡單應用

vue中過濾器，用於一些常見的文本格式化，用 | 來操作。

過濾器可以用在兩個地方：

1、在{{}}雙花括號中插入值

2、v-bind表達式中使用

<!-- 在雙花括號中 -->
{{ message | capitalize }}

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

栗子：

將這里的價格保留兩位小數

 

引入

import {toMoney} from '../filter/moneyFilter.js';

moneyFilter.js文件

export function toMoney (money = 0){
    return money.toFixed(2);
}

 

通過filters屬性

filters:{
        moneyFilter(money){
            return toMoney(money);
        }
 }

在需要格式化的地方使用

 <div class="rec-price">￥{{item.price | moneyFilter}}</div>