微信小程序wxml使用过滤器

微信小程序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.mzph.cn/news/102795.shtml

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

相关文章

互动设计:深入了解用户体验的关键

交互是人与计算机系统之间的互动过程。在计算机领域中&#xff0c;交互是人机交互技术的核心内容之一。交互设计是一种基于人类行为科学、心理学、人体工程学等领域的专业设计&#xff0c;目的是创造用户友好的、易于使用的计算机软件、网络、移动应用等。交互的本质在于用户的…

SpringBoot 接口 字节数组直接显示为图片

源码&#xff1a; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; import org.springframework.web.bind.annotation.RequestMapping;/*** 获取二维码图像* 二维码支付** param price 金额* return 二维码图像* throws IOException IOException*/ Requ…

Android Native 开发 要点记录

Android Studio 中写 C 代码 android studio创建C项目_android studio native c-CSDN博客 项目配置参考 【CMake】CMakeLists.txt的超傻瓜手把手教程&#xff08;附实例源码&#xff09;_【cmake】cmakelists.txt的超傻瓜手把手教程(附实例源码)-CSDN博客 CMakeLists.txt 讲解…

NZ系列工具NZ05:VBA不打开工作簿获取其内容

我的教程一共九套及VBA汉英手册一部&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到数据库&#xff0c;到字典&#xff0c;到高级的网抓及类的应用。大家在学习的过程中可能会存在困惑&#xff0c;这么多知识点该如何组织…

stm32mp157中断简单应用

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭 按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响 按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 main.c #include "gpio.h" #include &…

leetcode 打家劫舍篇

198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

Transformer预测 | Pytorch实现基于Transformer的锂电池寿命预测(NASA数据集)

文章目录 效果一览文章概述模型描述程序设计参考资料效果一览 文章概述 Pytorch实现基于Transformer 的锂电池寿命预测,环境为pytorch 1.8.0,pandas 0.24.2 随着充放电次数的增加,锂电池的性能逐渐下降。电池的性能可以用容量来表示,故寿命预测 (RUL) 可以定义如下: SOH(t…

Linux Shell 实现一键部署vmtools

VMware Tools 简介 VMware Tools 中包含一系列服务和模块&#xff0c;可在 VMware 产品中实现多种功能&#xff0c;从而使用户能够更好地管理客户机操作系统&#xff0c;以及与客户机操作系统进行无缝交互。 VMware Tools 具备以下功能&#xff1a; 将消息从主机操作系统传递…

TCP/IP(十五)拥塞控制

一 拥塞控制 ① 拥塞控制必要性 思考&#xff1a; 为什么要有拥塞控制呀,不是有流量控制了吗&#xff1f; ② 拥赛窗口 cwnd 什么是拥塞窗口? 和发送窗口有什么关系呢?明白&#xff1a; cwnd、swnd、rwnd 缩写 含义 ③ 如何知道当前网络是否出现了拥塞呢&#xff1f;…

不定积分(原函数)存在性定理、定积分存在性定理、变限积分存在性定理

1.不定积分(原函数)存在性定理、定积分存在性定理、变限积分存在性定理 笔记来源&#xff1a; 1.10个命题搞懂可积和原函数存在 2.考研变限积分概念超详细&#xff0c;超通俗讲解&#xff08;变限积分和原函数关系&#xff09; 声明&#xff1a;本文截图主要来自bili心一学长、…

Edge使用猴油脚本实战(实验室安全考试系统刷在线时长——网站永久自动刷新)

介绍 篡改猴 (Tampermonkey) 是拥有 超过 1000 万用户 的最流行的浏览器扩展之一。它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序&#xff0c;可用于向网页添加新功能或修改现有功能。使用 篡改猴&#xff0c;您可以轻松在任何网站上创建、管理…

Android平台实现lottie动画

1、lottie动画简介 Lottie 是一个应用十分广泛动画库&#xff0c;适用于Android、iOS、Web、ReactNative、Windows的库&#xff0c;它解析了用Bodymovin导出为json的Adobe After Effects动画&#xff0c;并在移动和网络上进行了原生渲染。它提供了一套完整得从AE到各个终端的…

【Java 进阶篇】JavaScript二元运算符详解

JavaScript是一门多用途的编程语言&#xff0c;它支持各种运算符&#xff0c;包括二元运算符。二元运算符用于执行两个操作数之间的操作&#xff0c;这两个操作数通常是变量、值或表达式。在本篇博客中&#xff0c;我们将详细探讨JavaScript的二元运算符&#xff0c;包括它们的…

记录:R语言生成热图(非相关性)

今天解决了一个困扰了我很久的问题&#xff0c;就是如何绘制不添加相关性的热图。一般绘制热图是使用corrplot包画相关性图&#xff0c;但是这样有一个前提&#xff0c;就是输入的数据集必须进行相关性分析。那么如果我不需要进行相关性分析&#xff0c;而是直接绘制能够反应数…

【快刊推荐】CCF-C类,2/3区SCIE,仅29天录用,16天见刊!

计算机领域 • 好刊推荐 01 期刊简介 影响因子&#xff1a;3.0-4.0 检索数据库&#xff1a;SCIE 在检 期刊分区&#xff1a;JCR2/3区&#xff0c;中科院4区 02 影响因子 影响因子呈现逐年稳步上升的趋势 03 期刊分区&#xff1a;JCR2/3区&#xff0c;中科院4区 04 预警…

Haskell网络编程:从数据采集到图片分析

概述 爬虫技术在当今信息时代中发挥着关键作用&#xff0c;用于从互联网上获取数据并进行分析。本文将介绍如何使用Haskell进行网络编程&#xff0c;从数据采集到图片分析&#xff0c;为你提供一个清晰的指南。我们将探讨如何使用亿牛云爬虫代理来确保高效、可靠的数据获取&am…

C++安装qt软件教程

目录 一、工具 二、安装步骤 1.1next 1.2安装目录 1.3安装环境设置选项 1.4Qt5.14.2 --> MinGW 7.3.0 64-bit 1.5 Qt5.14.2 --> 3D以下全选 1.6下一步 1.7下一步 1.8安装 三、什么是 Qt Qt 是一个跨平台的 C图形用户界面应用程序框架。 它为应用程序开发者提…

Python 单元测试设置

单元测试检查特定代码单元或模块是否按照开发人员的预期执行。 大多数时候&#xff0c;我们测试的代码单元是一个函数。 同样&#xff0c;我们可以测试所有功能。 作为最佳实践&#xff0c;至少在开发过程中&#xff0c;我们应该进行单元测试。 因此&#xff0c;在开发过程的…

java并发之AQS详解(待更)

一、为什么要用AQS同步框架&#xff1f; 开发者如果不了解JMM和多线程编程&#xff0c;就会写出很多线程不安全的程序&#xff0c;即使是经验丰富的程序员&#xff0c;并发编程也难免会出错。 而对于java程序员来说&#xff0c;并发编程就变得容易得多了&#xff0c;因为并发编…

如何在雷电模拟器上安装Magisk并加载movecert模块抓https包(二)

接来下在PC端安装和配置Charles&#xff0c;方法同下面链接&#xff0c;不再赘述。在模拟器上安装magisk实现Charles抓https包&#xff08;二&#xff09;_小小爬虾的博客-CSDN博客 一、记录下本机IP和代理端口 二、在手机模拟器上设置代理192.168.31.71:8888&#xff0c;设置…