uni

2023-08-06 03:14| 来源: 网络整理| 查看: 265

uni-app中过滤器的使用 1.问题

请求了一个新闻接口，返回的发布时间数据如下：在这里插入图片描述渲染到页面之后：并不是我想要的数据，我想到了vue中的过滤器，因为uni-app的绝大部分语法跟vue是一样的，所以想用vue的过滤器filters试试

2. 解决问题

在所使用的页面内添加过滤器，由于返回的数据是一个对象，所以先转成字符串，考虑到年月日有不满两位数的时候，使用padStart(2,0)进行补全

onLoad(){}, filters:{ formatData(data){ const nDate=new Date(data); const year = nDate.getFullYear().toString().padStart(2,0); const month = nDate.getMonth().toString().padStart(2,0); const day = nDate.getDay().toString().padStart(2,0); return year +'-'+ month +'-'+ day } }, methods:{}

页面使用过滤器，用管道符连接

{{detail.title}} 发表时间：{{detail.add_time | formatDate}} 浏览次数：{{detail.click}}

然后测试页面显示在这里插入图片描述显示合适了

3. 升华一下

在开发时我发现还有页面要渲染的时间数据也这个格式的，所以果断将过滤器filters改为全局过滤器在这里插入图片描述将filters改为全局过滤器在main.js内添加 main.js

import Vue from 'vue' import App from './App' Vue.filter("formatDate",(data)=>{ const nDate=new Date(data); const year = nDate.getFullYear().toString().padStart(2,0); const month = nDate.getMonth().toString().padStart(2,0); const day = nDate.getDay().toString().padStart(2,0); return year +'-'+ month +'-'+ day }) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount()

页面中不需要再添加过滤器了，直接在要使用的地方用管道符链接添加即可

{{v.title}} 发表时间：{{v.add_time | formatDate}} 浏览次数：{{v.click}}

【本文地址】

uni

uni

今日新闻

推荐新闻