【uni-app】使用全局filters [register global utility filters]

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,filters一样通用
1.新建文件存放所有的公用filters(@/filters/index.js)
此处以千字符加逗号过滤器toThousandFilter为例

//filters/index.js
/**
 * 10000 => "10,000"
 * @param {number} num
 */
export function toThousandFilter(num) {
  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}

2.main.js全局引入

import Vue from 'vue'
import App from './App'

import * as filters from './filters' // global filters

// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

3.页面使用

<template>
    <view class="container">
        商品总价 (元) : {{totalPrice | toThousandFilter}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
              totalPrice :9999
            }
        }
    }
</script>

效果图如下


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容