Manage filters in a separate file

src\main.js

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

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

Vue.config.productionTip = false

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

Copy the code

src\common\filters.js

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

src\App.vue

<template>
    <div id="app">
        <p>Goods spent: {{productOneCost | round | formatCost (' $')}}</p>
        <p>Goods spent 2: {{productTwoCost | round | formatCost (' $')}}</p>
        <p>Goods spent three: {{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>
Copy the code