uniap—过滤器的使用(数据源处理)

我们可以根据项目需求定义过滤器对数据源进行处理，如下所示
(1) 在main.js 中封装全局过滤器

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

// 全局过滤器
Vue.filter('priceFormat', function (value) {
    return '$' + value + '元';
})
Vue.filter('statusFilter',function(value){
    return value==0?'离线':value==1?'在线':'未知';
})
Vue.filter('timeFormat',function(vulue,type){
    switch (type){
        case "chuo":
            return vulue.getTime();
            break;
        case "year":
            return vulue.getFullYear();
            break;
        case "month":
            return vulue.getMonth()+1
            break;
        case "day":
            return vulue.getDate();
            break;
        case "hour":
            return vulue.getHours();
            break;
        case "minute":
            return vulue.getMinutes();
            break;
        case "second":
            return vulue.getSeconds();
            break;
        default:
            return vulue;
            break;
    }
    
})


Vue.config.productionTip = false

App.mpType = 'app'

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

(2) 使用过滤器

<template>
    <view style="display: flex; flex-direction: column;">
        <text>价格: {{price|priceFormat}}</text>
        <text>状态: {{status|statusFilter}}</text>
        <text>时间: {{time}}</text>
        <text>时间戳: {{time|timeFormat('chuo')}}</text>
        <text>时间-年: {{time|timeFormat('year')}}</text>
        <text>时间-月: {{time|timeFormat('month')}}</text>
        <text>时间-日: {{time|timeFormat('day')}}</text>
        <text>时间-时: {{time|timeFormat('hour')}}</text>
        <text>时间-分: {{time|timeFormat('minute')}}</text>
        <text>时间-秒: {{time|timeFormat('second')}}</text>
    </view>
</template>

<script>
    export default {  
        data() {
            return {
                price:"5",
                status:2,
                time:new Date()
            }
        },
        methods: {
            
        },
        onLoad() {
        
        }
    }
</script>

<style>

</style>

(3) 数据源处理后的效果如下

拓展：通常需要对服务器返回的数据源进行处理，如时间和价格进行格式化处理，可直接使用插件价格和时间过滤器，格式化价格和时间来实现。