vue过滤器filter.js

将过滤器放到单独的一个文件中统一管理

src\main.js

import Vue from 'vue'
import App from './App.vue'
import * as customFilters from './common/filters'

/* 过滤器 */
Object.keys(customFilters).forEach(key => {
    Vue.filter(key, customFilters[key])
})

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

src\common\filters.js

export const formatCost = (value, symbol) => {
    return symbol + (value / 100).toFixed(2)
}

src\App.vue

<template>
    <div id="app">
        <p>商品一花费了:{{productOneCost|round|formatCost('$')}}</p>
        <p>商品二花费了:{{productTwoCost|round|formatCost('$')}}</p>
        <p>商品三花费了:{{productThreeCost|formatCost('$')}}</p>
        <input type="text" :value="productOneCost|formatCost('$')">
    </div>
</template>
<script>
    export default {
        name: 'App',
        data: function () {
            return {
                productOneCost: 998.5,
                productTwoCost: 2399.5,
                productThreeCost: 5300
            }
        },
        filters: {
            // formatCost (value, symbol) {
            //     return symbol + (value / 100).toFixed(2)
            // },
            round (value) {
                return Math.round(value)
            }
        }
    }
</script>