Vue-24、Vue过滤器

1、效果
在这里插入图片描述

2、过滤器实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤器</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><h1>显示格式化后的时间</h1><!----><h2>现在是:{{time| timeFormater}}</h2></div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{time:1705392226413,},filters:{timeFormater(value){console.log(value);return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')}}})
</script>
</body>
</html>

3、过滤器传参

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤器</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><h1>显示格式化后的时间</h1><!--过滤器实现--><h2>现在是:{{time| timeFormater}}</h2><!--过滤器实现传参--><h2>现在是:{{time| timeFormater2('YYYY-MM-DD')}}</h2>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{time:1705392226413,},filters:{timeFormater(value){console.log(value);return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')},timeFormater2(value,str){return dayjs(value).format(str)}}})
</script>
</body>
</html>

3、多个过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤器</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><h1>显示格式化后的时间</h1><!--过滤器实现--><h2>现在是:{{time| timeFormater}}</h2><!--过滤器实现传参--><h2>现在是:{{time| timeFormater2('YYYY-MM-DD')}}</h2><!--多个过滤器--><h2>现在是:{{time| timeFormater | timeFormater3}}</h2></div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{time:1705392226413,},filters:{timeFormater(value){console.log(value);return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')},timeFormater2(value,str){return dayjs(value).format(str)},timeFormater3(value){return value.slice(0,4)}}})
</script>
</body>
</html>

4、全局过滤器

Vue.filter('myFileter',function (value) {return value.slice(0,4)});

**加粗样式**

总结:
在这里插入图片描述

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

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

相关文章

mac 系统中vscode 返回上一次文件编辑位置快捷键

mac 系统中vscode 返回上一次文件编辑位置快捷键 以下内容由chatgpt中文网 动态生成,助力开发找我 方式1&#xff1a; Command -&#xff1a;返回到上一个编辑位置。 方式2 control -&#xff1a;返回到上一个编辑位置。

OpenCV-Python(45):立体图像中的深度地图

基础 在OpenCV中&#xff0c;深度地图通常是通过计算立体视觉&#xff08;stereo vision&#xff09;或结构光&#xff08;structured light&#xff09;技术得到的。立体视觉是通过将两个或多个摄像机&#xff08;或图像&#xff09;的视角结合起来&#xff0c;计算物体的深度…

Kafka 的架构

实验过程 1.三个虚拟机中解压kafka软件包 tar -zxvf kafka_2.11-1.1.1.tgz 2.修改 3 个节点配置文件 在 zookeeper 节点&#xff0c;进入 kafka_2.11-1.1.1/config 目录下&#xff0c;编辑 server.properties 文件 [rootdb1 ~]# cd kafka_2.11-1.1.1/config [rootdb1 con…

智能路由器 端口映射 (UPnP) Padavan内网端口映射配置方法

新版本Padavan 4.4内核的端口映射配置和老版本的不太一样,因为新版本默认是启用的 UPnP端口映射, 同时默认使用的是 IGD UPnP自动端口映射, UPnP名词解释: UPnP通用即插即用&#xff0c;是一组协议的统称&#xff0c;是一种基于TCP/IP、UDP和HTTP的分布式、开放体系&#xff…

P9847 [ICPC2021 Nanjing R] Crystalfly 题解 (SPJ)

[ICPC2021 Nanjing R] Crystalfly 传送门&#xff1f; 题面翻译 给定一个 n ( 1 ≤ n ≤ 1 0 5 ) n(1\le n\le10^5) n(1≤n≤105) 个节点的树&#xff0c;每个节点上有 a i a_i ai​ 只晶蝶。派蒙最初在 1 1 1 号节点&#xff0c;并获得 1 1 1 号节点的所有晶蝶&#xf…

Java设计模式之策略模式详解

Java设计模式之策略模式详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一同踏入Java设计模式之策略模式的世界&#xff0c;探讨代码中的…

NetSuite学习笔记 - 中心

一、什么是中心&#xff1f; 对于每个用户&#xff0c;NetSuite 会根据用户的指定角色显示一组可变的标签页面&#xff0c;称为中心。通俗来讲呢&#xff0c;NetSuite的中心其实就是我们常说的“导航菜单”。 只是在我过去常见的系统中&#xff0c;导航菜单一般都是固定的&am…

Elasticsearch Windows部署-ELK技术栈

1、下载Elasticsearch、kibana、logstash 本文不介绍ELK相关原理知识&#xff0c;只记录部署操作过程 下载地址Past Releases of Elastic Stack Software | Elastic 选择同一版本&#xff0c;这里选择是当前最新版本8.11.3 解压放在同目录下&#xff0c;方便后续操作与使用 …

python 创建虚拟环境

为啥需要创建虚拟环境 在ubuntu直接pip安装的错误&#xff0c;规避自己安装的包与系统使用包之间的冲突 ➜ ~ pip3 install fastapi error: externally-managed-environment This environment is externally managed ╰─> To install Python packages system-wide, try a…

GPT实战系列-实战Qwen在Cuda 12+24G部署方案

GPT实战系列-实战Qwen在Cuda1224G部署方案 ChatGLM4进行新闻发布&#xff0c;但还没有开源更新&#xff0c;在此之际&#xff0c;实战部署测试Qwen大模型。目前Qwen的口碑貌似还不错&#xff0c;测试显卡内存24G&#xff0c;毕竟有限&#xff0c;排除了Qwen14非量化方案Qwen-1…

浅入浅出Spring架构设计

浅入浅出Spring架构设计 前言 为什么需要Spring? 什么是Spring? 对于这样的问题&#xff0c;大部分人都是处于一种朦朦胧胧的状态&#xff0c;说的出来&#xff0c;但又不是完全说的出来&#xff0c;今天我们就以架构设计的角度尝试解开Spring的神秘面纱。 本篇文章以由浅…

RK3566 linux加入uvc app

SDK中external/uvc_app/目录提供了将板卡模拟成uvc camera的功能。 一、buildroot使能uvc_app 1、进入到buildroot目录 在sdk目录下执行以下命令&#xff1a; cd buildroot 2、选择defconfig 执行命令&#xff1a; source build/envsetup.sh 输入数字然后回车选择板卡&…

【Vue3】3-4 : 组件的属性与事件是如何进行处理的

有时候组件上的属性或事件并不想进行组件通信&#xff0c;那么Vue是如何处理的呢&#xff1f; 组件的属性与事件 默认不通过props接收的话&#xff0c;属性会直接挂载到组件容器上&#xff0c;事件也是如此&#xff0c;会直接挂载到组件容器上。可通过 inheritAttrs 选项阻止…

Java中Redis常用的20个方法

开头语&#xff1a; 大家好&#xff01;欢迎来到本篇博客&#xff0c;今天我们将探讨Java中Redis的常用方法。作为一种强大的缓存和数据存储工具&#xff0c;Redis在Java应用中扮演着重要的角色。我们将介绍20个常用的Redis方法&#xff0c;希望对大家在Java开发中更好地使用R…

两数之和(Hash表)[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums和一个整数目标值target&#xff0c;请你在该数组中找出"和"为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…

HC小区管理系统商用测试用例

HC小区管理系统商用测试用例 说明 HC小区管理系统商用之前&#xff0c;必须要经过严格的测试&#xff0c;可能因为环境差异&#xff0c;以及配置差异等导致生产环境不稳定&#xff0c;或者存在系统bug。 1.1、操作视频 hc_java110的个人空间-hc_java110个人主页-哔哩哔哩视…

Spark—shell,Hbase—shell

Spark&#xff1a; SPARK SQL results spark.sql( "SELECT * FROM people") //读取JSON文件 val userScoreDF spark.read.json("hdfs://master:9000/people.json") Spark内置函数的使用 除select()外&#xff0c;还可以使用filter()、groupBy()等方…

工具推荐 |Devv.ai — 最懂程序员的新一代 AI 搜索引擎

介绍 伴随 GPT 的出现&#xff0c;我们可以看到越来越多的 AI 产品&#xff0c;其中也不乏针对程序员做的代码生成工具。 今天介绍的这款产品是一款针对中文开发者的 AI 搜索引擎&#xff0c;Devv.ai 使用 Devv.ai 的使用非常简单&#xff0c;就是传统的搜索场景&#xff…

pexpect中interact模式的坑

截止写这篇博文为止&#xff0c;根据官方文档&#xff0c;调用interact模式时需要将logfile设置为None&#xff0c;否则日志会在终端显示两次&#xff08;logfile_read一次&#xff0c;logfile一次&#xff09;&#xff0c;将logfile_read或者logfile_send设置为None是无效的&a…

JVM:类加载机制

JVM&#xff1a;类加载机制 1. 什么是类加载机制2. 类加载的过程(生命周期)2.1 加载2.2 校验&#xff08;验证&#xff09;2.3 准备2.n 六种情况对类进行“初始化” 1. 什么是类加载机制 Java虚拟机把描述类的数据从Class文件加载到内存&#xff0c;并对数据进行校验、转换解析…