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>