DDR爱好者之家

vue通过过滤器实现数据格式化
站长资源 2024/11/24 佚名
71 1538
DDR爱好者之家 Design By 杰米

一、本节说明

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

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

二、 怎么做

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

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

  • 过滤器的第一个参数是固定的，就是输入的数据。对于{{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通过过滤器实现数据格式化

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米