我们可以根据项目需求定义过滤器对数据源进行处理,如下所示
(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) 数据源处理后的效果如下
拓展:通常需要对服务器返回的数据源进行处理,如时间和价格进行格式化处理,可直接使用插件价格和时间过滤器,格式化价格和时间来实现。