过滤器的几种实现方法

过滤器：对要显示的数据进行特定格式化后再显示，
语法：（1）注册过滤器分为局部注册和全局注册。局部注册new Vue(filter:{}),全局注册：Vue.fmtData_global
(2)使用过滤器：{{xxx|过滤器名}}或v-bind：属性="xxx|过滤器名"

以下代码通过全局注册，局部注册，计算属性，方法，过滤器这几个方式实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue框架 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script></head><body><div id="root"><h2>显示格式化后的时间</h2><!-- 2使用全局过滤器 --><div>现在的时间是{{new Date() |fmtData_global}}</div><!-- （1）使用计算属性 --><div>现在的时间是{{fmtData}}</div><!-- （2）使用方法 --><div>现在的时间是{{getfmtData()}}</div><!-- (3)filter --><div>现在的时间是{{new Date()|gfmtData |sclice}}</div></div><script>// 1全局注册过滤器// Vue.filter("fmtData_global", function (date) {//     return moment(date).format('YYYY-MM-DD HH:mm:ss')// })let vm = new Vue({el: '#root',// 局部过滤器// （1）使用计算属性实现时间格式化computed:{ fmtData(date){return moment(date).format('YYYY-MM-DD HH:mm:ss')}},// (2)使用methods方法methods: {getfmtData(val){return moment(val).format('YYYY-MM-DD HH:mm:ss')}},// （3）使用filterfilters: {gfmtData(value, str = "YYYY-MM-DD HH:mm:ss") {return moment(value).format(str)},sclice(value) {return value.slice(0, 4)}}})</script>
</body></html>

效果如下：

过滤器的几种实现方法相关推荐

Springboot过滤器的几种配置方法
过滤器直接注入Fiter的方法 Filter Filter+FiterConfig的方法 Fiter FilterConfig SpringSecurity中继承OncePerRequestFilt ...
再谈STM32的CAN过滤器-bxCAN的过滤器的4种工作模式以及使用方法总结
1. 前言 bxCAN是STM32系列最稳定的IP核之一,无论有哪个新型号出来,这个IP核基本未变,可见这个IP核的设计是相当成熟的.本文所讲述的内容属于这个IP核的一部分,掌握了本文所讲内容,就可以 ...
Servlet 过滤器两种配置方法
Servlet 过滤器两种配置方法方法一(注解) /** * 使用注解标注过滤器 * @WebFilter将一个实现了javax.servlet.Filte接口的类定义为过滤器 * 属性filter ...
12种Dropout方法：应用于DNNs，CNNs，RNNs中的数学和可视化解释
2020-06-30 13:41:41 作者:Axel Thevenot 编译:ronghuaiyang 导读深入了解DNNs,CNNs以及RNNs中的Dropout来进行正则化,蒙特卡洛不确定性和 ...
颗粒物检测仪常用的三种检测方法
颗粒物检测仪的测量原理:仪器由组装好的传感器和数据处理器组成.传感器是本装置数据采集的重要部件,原理是将激光束通过非球面镜组变为功率密度均匀分布的细小测量光束,在光束道的侧前方,前方焦点对准光束道,后 ...
Vue过滤器的几种用法
Vue过滤器的几种用法本文主要介绍Vue项目中filter的几种用法. 一. 单独在组件或者是页面中使用单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind ...
在Mac上缩小PDF文件大小的3种简便方法
从专业的学术报告到市场媒体工具包材料,或个人简历,PDF文件无处不在.为什么?主要是因为它保留了文档格式,因此可以在所有设备,屏幕或系统中完美显示内容.而且,我们可以轻松创建引人注目的数字文件,并且接 ...
水处理过滤器保养及维护工艺方法阐述
在水处理行业中过滤器是一种很常见的配件之一,其种类很多如:精密过滤器.活性炭过滤器.前置过滤器.粗虑过滤器.碟盘式过滤器等,可根据用水要求.水质及要求出水水质来选择匹配的类型.由于水处理过滤器长期运行 ...
快速排序的两种实现方法(c语言版本)
经过调研发现,对任意无序整数数组,快速排序有两种实现方法,这里简单阐述下思路: 思路一:随意选择一个基准元,一般选择数组的起始元或末尾元,Weiss这本书上特意搞了个算法来选择基准元,--,总之就是基 ...

过滤器的几种实现方法

过滤器的几种实现方法相关推荐

最新文章

热门文章