微信小程序wxml使用过滤器

news2024/9/23 5:28:13

微信小程序wxml使用过滤器

  • 1. 新建wxs
  • 2. 引用和使用

如何在微信小程序wxml使用过滤器?
犹如Angular使用pipe管道这样子方便,用的最多就是时间格式化。

下面是实现时间格式化的方法和步骤:

1. 新建wxs

在这里插入图片描述
插入代码:

/**
 * 管道过滤工具类
 * @param strDate 
 * @param format 
 */

// 第一种方法:
var formatTime = function (strDate, format = "yyyy-MM-dd hh:mm:ss") {
  if(strDate==null || strDate ==undefined || strDate=="")
  {
      return ""
  }
  // 解决ios出现NaN问题
  strDate = strDate.replace("T", " ");
  var realDate = strDate ? getDate(strDate.replace(getRegExp('-', 'g'), '/')) : getDate();
  var regYear = getRegExp("(y+)", "i");
  var date = [
      ["M+", realDate.getMonth() + 1],
      ["d+", realDate.getDate()],
      ["h+", realDate.getHours()],
      ["m+", realDate.getMinutes()],
      ["s+", realDate.getSeconds()],
      ["q+", Math.floor((realDate.getMonth() + 3) / 3)],
      ["S+", realDate.getMilliseconds()],
  ];
  var reg1 = regYear.exec(format);
  if (reg1) {
      format = format.replace(reg1[1], (realDate.getFullYear() + '').substring(4 - reg1[1].length));
  }
  for (var i = 0; i < date.length; i++) {
      var reg2 = getRegExp("(" + date[i][0] + ")").exec(format);
      if (reg2) {
          format = format.replace(reg2[1], reg2[1].length == 1 ? v : ("00" + date[i][1]).substring(("" + date[i][1]).length));
      }
  }
  return format;
}

module.exports = {
  formatTime:formatTime
}

2. 引用和使用

wxml中使用

<wxs module="filter" src="../../utils/pipe.wxs"></wxs>
<view slot="title">
{{filter.formatTime(billingPeriodStart, 'yyyy-MM-dd')}} ~ {{filter.formatTime(billingPeriodEnd,'MM-dd')}}
</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1080025.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

泡泡玛特,难成“迪士尼”

作者 | 艺馨 豆乳拿铁 排版 | Cathy 监制 | Yoda 出品 | 不二研究 新增长难寻&#xff0c;新故事难讲。泡泡玛特(06682.HK)业绩增长承压的困局&#xff0c;都写在最新的半年报里。 曾经潮玩领域的王者、“潮玩第一股”泡泡玛特&#xff0c;主题城市乐园于9月26日在北京朝阳…

centos下安装配置redis7

1、找个目录下载安装包 sudo wget https://download.redis.io/release/redis-7.0.0.tar.gz 2、将tar.gz包解压至指定目录下 sudo mkdir /home/redis sudo tar -zxvf redis-7.0.0.tar.gz -C /home/redis 3、安装gcc-c yum install gcc-c 4、切换到redis-7.0.0目录下 5、修改…

2023年中国医学影像信息系统市场规模、竞争格局及行业趋势分析[图]

医学影像信息系统简称PACS&#xff0c;与临床信息系统、放射学信息系统、医院信息系统、实验室信息系统同属医院信息系统。医学影像信息系统是处理各种医学影像信息的采集、存储、报告、输出、管理、查询的计算机应用程序。主要包括&#xff1a;预约管理、数据接收、影像处理、…

[读博随笔] 系统安全和论文写作的那些事——不忘初心,江湖再见

很难想象读博这四年的时光意味着什么&#xff0c;是对妻子和儿子深切的思念。我在珞珈山下挑灯夜读&#xff0c;你在贵阳家中独自照顾幼子。怕的不是孑然一身&#xff0c;而是明明已经习惯两个人&#xff0c;又必须各自前行&#xff0c;像单打独斗的勇士。想到千里之外还有一个…

【软考设计师】【计算机系统】E01 计算机硬件组成与CPU

【计算机系统】E01 计算机硬件组成与CPU 硬件组成概述中央处理单元 CPUCPU 组成运算器控制器寄存器组 多核 CPU 硬件组成概述 运算器&#xff1a; 数据加工处理部件&#xff0c;用于完成计算机的各种算术和逻辑运算。控制器&#xff1a; 顾名思义&#xff0c;控制整个CPU的工作…

2023年中国牙线市场规模、竞争现状及行业需求前景分析[图]

牙线是由合成纤维或其他材料制成&#xff0c;或添加香料、色素、活性成分等&#xff0c;用来清洁牙齿邻面附着物的线。能够有效包裹牙齿&#xff0c;对于清洁平面/凸起牙面和牙齿邻接面的牙菌斑效果很好&#xff0c;还可以实现对于牙缝间食物/异物的剔除&#xff0c;有效清洁口…

水库大坝除险加固安全监测系统解决方案

一、系统背景 为贯彻落实《办公厅关于切实加强水库除险加固和运行管护工作的通知》&#xff08;〔2021〕8号&#xff09;要求&#xff0c;完成“十四五”小型病险水库除险加固、雨水情测报和大坝安全监测设施建设任务&#xff0c;规范项目管理&#xff0c;消除安全隐患&#xf…

nodejs+vue 教学辅助管理系统

通过科技手段提高自身的优势&#xff1b;对于驾校预约管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了驾校预约管理系统&#xff0c;它彻底改变了过去传统的管理方式&#xff0c;不仅使服务管理难度变低了&#xff0c;还提升了管理的灵活性。…

云里雾里?云方案没有统一标准,业务结合实际情况才是应该着重考虑的

公共云正在迅速成为IT领导者及其业务线同行的首选平台。根据研究机构IDC的数据&#xff0c;2018年全球公共云服务和基础设施支出预计将达到1600亿美元&#xff0c;比2017年的投资水平增长23%。 然而&#xff0c;在向按需IT转变的步伐不断加快的同时&#xff0c;首席信息官们面…

文旅如何以数字人三维动画宣传片,实现文化资源数字化转化?

近日&#xff0c;山西文旅推出虚拟星推官——晋依依&#xff0c;通过数字人三维动画宣传片的形式&#xff0c;以数字人晋依依的第一视角&#xff0c;对山西的历史文化进行了回顾、展望与想象&#xff0c;利用数字人将山西原有的人文、环境、地貌等进一步宣传&#xff0c;带动当…

乐优商城(一)介绍和项目搭建

1. 乐优商城介绍 1.1 项目介绍 乐优商城是一个全品类的电商购物网站&#xff08;B2C&#xff09;用户可以在线购买商品、加入购物车、下单可以评论已购买商品管理员可以在后台管理商品的上下架、促销活动管理员可以监控商品销售状况客服可以在后台处理退款操作希望未来 3 到 …

【机器学习】集成学习(以随机森林为例)

文章目录 集成学习随机森林随机森林回归填补缺失值实例&#xff1a;随机森林在乳腺癌数据上的调参附录参数 集成学习 集成学习&#xff08;ensemble learning&#xff09;是时下非常流行的机器学习算法&#xff0c;它本身不是一个单独的机器学习算法&#xff0c;而是通过在数据…

Rust入门基础

文章目录 Rust相关介绍为什么要用Rust&#xff1f;Rust的用户和案例 开发环境准备安装Rust更新与卸载Rust开发工具 Hello World程序编写Rust程序编译与运行Rust程序 Cargo工具Cargo创建项目Cargo构建项目Cargo构建并运行项目Cargo检查项目Cargo为发布构建项目 Rust相关介绍 为…

关于串口服务器及转接线的一些基础知识笔记

1.普通个人计算机9针串口为232接口&#xff0c;部分特殊工业计算机为485接口。接线方式差异较大&#xff0c;容易区分。 2.串口服务器的作用&#xff1a;带串口的设备&#xff08;支持常见232、485/422接口方式&#xff09;&#xff0c;将其串口数据信号通过串口服务器转为网络…

角谷猜想:键盘输入一个整数,输出角谷猜想验证过程

键盘输入一个整数&#xff0c;输出角谷猜想验证过程。 (本笔记适合python循环、if条件语句、字符串格式化输出的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&…

cdsn目录处理:空行替换2个```,在2个```中间添加“# 空行文本后遇到的第1行文字”?

原标题&#xff1a; python查找替换&#xff1a;查找空行&#xff0c;空行前后添加&#xff0c;中间添加 # 空格 空行后遇到的第1行文字&#xff1f;初始代码 查找空行空行前后添加 中间添加 # 空行后遇到的第1行文字txt 36 96 159 8 72可以使用Python的字符串处理函数来查找…

【数据库系统概论】第一章数据库绪论

第一章目录&#xff1a; 1.1数据库系统概述 1.1.1四个基本概念 数据&#xff1a; 数据库&#xff1a;Database -DB 数据库管理系统&#xff08;DBMS&#xff09; 数据库系统&#xff08;DBS&#xff09;&#xff08;有四个组成要素&#xff09; 1.1.2数据管理技术的产生…

【电商API封装接口】电商百万商品资源一键导入,助力企业流量变现

电商API接口是淘宝开放平台提供的一组数据接口&#xff0c;供开发者使用来获取淘宝平台上商品、店铺、订单等相关信息。根据功能和分类&#xff0c;淘宝API主要包括以下几个方面&#xff1a; 1. 商品API&#xff1a;提供了搜索、详情、评价等与商品相关的接口&#xff0c;可以…

vue2 打印数据 以及使用 (2)

安装 To install using npm:npm install print-js --saveTo install using yarn:yarn add print-js页面效果 <template><div><table width"100%" height"100%" border"1"><tr><td colspan"1">1</td&…

python图片处理:添加背景文生图(2)

文生图3.0&#xff1a;添加背景图片 3个回车文生图꧂写在前面&#xff1a;肉麻的话꧁ 哈哈&#xff0c;我明白了&#xff01;请允许我再试一次以幽默的方式来重新描述文本&#xff1a; 亲爱的主人大大&#xff0c;你是超级棒的&#xff01;如果你不想处理枯燥的代码&#xff0…