vue通过过滤器实现数据格式化

一、本节说明

在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化。VUE的过滤器的实现参考了linux的shell命令的管道的实现原理：即上一个命令的输出，是下一个命令的输入。
所以过滤器可以串接使用：{{数据 | 过滤器A | 过滤器B}}

除了在插值表达式中可以使用过滤器，在后文中将要学习到的v-bind指令中也可以使用过滤器。用法是一致的，到时候我们再看一看。

二、 怎么做

全局过滤器（定义一个用于做日期格式化的过滤器）

  • 过滤器的第一个参数是固定的，就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言，参数input=message，即“|”管道符之前的数据输出，作为过滤器的输入数据。
  • 过滤器除了第一个参数固定是“管道输出”，其他的参数根据需要自定义。在传参的时候，从第二个参数开始传入即可。{{message|date-format(message,'yyyy-mm-dd')}}写法是错误的。
  • 其中let是ES6中定义变量的语法，类似于var，但在块作用域方面有不同之处。可以自行搜索深入学习
  • 在上文代码中使用了 template string语法，使用该语法可以有效的解决，字符串与变量繁琐的拼接问题。“`”这个字符是键盘在英文输入法环境中，ESC下方的那个按键。
  • 在template string语法中，变量用${变量名}括起来。这个用法也是参考了linux的shell脚本的实现。
  • 使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；padStart(2,'0')表示如果字符串长度不足2位，则左补0，补足到长度为2.

三、 效果

过滤器的使用方法:

{{message}}
{{message|date-format('yyyy-mm-dd')}}

浏览器显示的效果:

四、 深入：私有过滤器

除了可以定义全局的过滤器，我们还可以定义私有过滤器。但是过滤器这种代码，类似于工具类，我们一般定义为全局的，让它在各个模块、组件里面都可以使用。

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

以上就是vue通过过滤器实现数据格式化的详细内容，更多关于vue实现数据格式化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 过滤器vue.filters的使用方法实现

    过滤器vue.filters的使用方法实现

    写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊.一些工具方法.字符的格式化啊等等.这些很多页面需要用的.使用频率极高的方法,我们一般会将其封装为全局的方法:我以前是这样做的,有这么几种方式: 1.挂载到vue.prototype 在main.js入口文件中挂载到vue.prototype,如我们封装一个获取时间戳的函数. Vue.prototype.now = Date.now || function () { return new Date().getTime()

  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求.然后就对vue中的filter一些用法结合源码好好的梳理了下.下边我们以一个日期格式化展开讨论. 1. 定义一个日期格式化函数 都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下 export functio

  • vue过滤器实现日期格式化的案例分析

    说明 今天将要介绍的是vue中的过滤器,并且将实现一个日期格式化的小案例. 大家都知道,我们获取当前日期可以通过Date对象获取.下面我将获取当前时间并打印出来. console.log(new Date()); 我们获取的是一个标准时间,控制台的输出如下所示. 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化. 过滤器 在vue中,我们可以使用过滤器来进行时间格式化.它的写法如下: // Vue.filter(过滤器

  • vue指令v-html使用过滤器filters功能实例

    问题 2.0 filters only work in mustache tags and v-bind. Vue2.0 不再支持在 v-html 中使用过滤器,比如在 1.0 中是这样使用的: {{{ option.title | highlight }}} 然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在 {{ }} 和 v-bind 中. 然而,嫌麻烦,还想使用怎么办? 解决方法 使用全局方法 使用 computed 属性 使用 $options.filters 使用全局方法 p

  • vue通过过滤器实现数据格式化

    一.本节说明 在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化.VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入. 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器.用法是一致的,到时候我们再看一看. 二. 怎么做 全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据.对

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • vue中的过滤器及其时间格式化问题

    一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">

  • vue使用过滤器格式化日期

    vue使用过滤器格式化日期

    本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下 案例要求 案例讲解 1.查看未过滤格式化的日期格式 2.设置模板函数format 接收日期值和日期格式 3.按照日期格式对日期进行拼接并返回值 4.将拼接好的日期显示在页面上 最终案例效果 代码 设置日期显示格式 <div id="app"> <div>{{date }}</div> <div>{{date | format('yyyy-MM-dd')}}

  • 详解Vue自定义过滤器的实现

    一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu

  • vue自定义过滤器创建和使用方法详解

    本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下 过滤器:生活中有很多例子,净水器 空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用 语法: <any

  • web前端vue filter 过滤器

    vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式. 比如给价格自动加上中文的钱的字符"￥"或者是给一个时间段或(时间戳)相互之间的转换过滤. 在javascript和jquery的年代!时间段的显示或者是提交,都是要在显示的时候要转换下或者提交的时候转换下,这样就有点繁琐了(个人用了vue后的感觉繁琐了). 不多说直接看例子如下: filter定义的过滤器可以局部,可以全局的下面就直接说全局的 老样子还是等先注册一个全局的过滤器关

  • 详解Vue串联过滤器的使用场景

    平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000

随机推荐