首页 > 使用Vue的filters(本地)或filter(全局)过滤常用数据类型

使用Vue的filters(本地)或filter(全局)过滤常用数据类型

情况一：后台给的日期是Sat Jul 31 2021 21:50:01 GMT+0800 (中国标准时间)，如果直接呈现给用户，他们一定会吐槽你不说人话~~~

情况二：后台给的百分数是小数没有转化成00%格式

采用vue的过滤机制就可以解决这种情况，有两种方式：

第一种：全局写法，在main.js里面加入

// 【全局过滤】----------------------------------------//转换情况一的日期
Vue.filter('yyyy_MM_dd', v => {if (v) return new Date(v).toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",}).replace(///g, "-");else return '';
});//转换情况二的百分数
Vue.filter('percent', v => {if (v) return  Math.abs(v.toFixed(2)) + "%";else return 0;
});

第二种：本地写法，在vue文件页面的里面加入

  filters: {//转换情况一的日期yyyy_MM_dd: (v) => {if (v)return new Date(v).toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",}).replace(///g, "-");else return "";},//转换情况二的百分数percent: (v) => {if (v) return Math.abs(v.toFixed(2)) + "%";else return 0;},},

然后在绑定对应数据的地方用竖线“|”跟上对应的过滤方法就可以了

{ { 日期 | yyyy_MM_dd }}
{ { 小数 | percent }}/*额外知识：
过滤器还支持串联，也就是多个 | filterName | filterName | ... 这样可以综合在一起使用多个过滤功能。过滤器是 JavaScript 函数，因此可以接收参数：
{ { string | filter('参数1', 参数2) }}
这里，filter被定义为接收三个参数的过滤器函数。其中 string 的值作为第一个参数，普通字符串 '参数1' 作为第二个参数，表达式 参数2 的值作为第三个参数。*/

更多相关：

  • main函数参数，在VS中向命令行添加参数的方法

    问题描述 使用main函数的参数，实现一个整数计算器，程序可以接受三个参数，第一个参数“-a”选项执行加法，“-s”选项执行减法，“-m”选项执行乘法，“-d”选项执行除法，后面两个参数为操作数。 例如：输入test.exe  -a 1 2       执行1+2输出3 问题分析 上面的逻辑思维很简单，但是问题在于如何在VS中向...

  • MyBatis中#{}和${}的区别

    ------------------------siwuxie095                         MyBatis 中 #{} 和 ${} 的区别       1、在 MyBatis 的映射配置文件中，动态传递参数有两种方式：    （1）#{} 占位符    （2）${} 拼接符          2、#{} 和...

  • 高阶函数-lambda表达式

        #2.6 map()# 第一个参数传入一个函数，，第二个参数为一个可迭代对象li_1 = (1,3,5,7)def funcA(x): return x*xm1 = map(funcA,li_1)print(type(m1))print(m1())# 2.6 reduce()# 第一个参数传入一个函数，第二个参数 可以迭...

  • day 2 基本类型和函数

    列表，元组，字典的转换。 list列表是一组可变的元素集合 列表是'[]'括号组成的，[]括号包含所有元素，列表的创建可以传递字符串，也可以传递多个字符串来创建列表。如"asd", / "a","b" ... tuple元组的创建和列表一致，区别在于 元组是以'()'创建的，并且元组数据不可变。 dict字典不同于列表和元组，他...

  • 判断屏幕宽高比是否为16:9

    /*判断屏幕宽高比是否为16:9*/ function isScreen16to9() {return window.screen.height / window.screen.width === 9 / 16; }...

  • 关闭、刷新、跳转、离开当前网页前提示

    /*关闭、刷新、跳转、离开当前网页前提示*/ onbeforeunload = function () {return false; };  ...

  • JavaScript原生代码处理JSON的一些高频次方法合集

    let json = {/**判断JSON格式*/ isJSON: function (str) {if (typeof str == "string") {try {var obj = JSON.parse(str);if (typeof obj == "object" && obj) {return true;} else {...

  • Node.js（nodejs）对本地JSON文件进行增、删、改、查操作（轻车熟路）

      项目结构   index.js //必须要安装否则就别想运行了❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤ //npm i body-parser -D & cnpm i express & cnpm i node-xlsx & cnp...

  • day16 递归函数

    一、递归 函数  　　为什么要有函数，提高代码的可读性，避免重复的代码，提高代码的复用性      在函数中能用return的不要print 1、递归的最大深度997 def foo(n):print(n)n+=1foo(n) foo(1) 递归的最大深度 2、修改递归的最大深度     由此我们可以看出，未报错之前能看到的最大数...

  • ACM训练小结-2018年6月16日

       今天题目情况如下：A题：线段树+XOR性质。情况：由于写法问题，调试困难，浪费大量时间。B题：（对所有满足i mod p==q，求a[i]之和），无修改，直接上n*sqrt(n)的分块写法。情况：由于250ms的时间限制，浪费大量时间思考新方法，但实际上时限足够。C题：BFS题目，直接SPFA。情况：未花费多少时间，直接写出。D...

©2024 11GX.COM