DDR爱好者之家

web前端vue filter 过滤器
站长资源 2025/1/12 佚名
76 1538
DDR爱好者之家 Design By 杰米

vue的过滤器通常用在一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

比如给价格自动加上中文的钱的字符“￥”或者是给一个时间段或（时间戳）相互之间的转换过滤。

在javascript和jquery的年代！时间段的显示或者是提交，都是要在显示的时候要转换下或者提交的时候转换下，这样就有点繁琐了（个人用了vue后的感觉繁琐了）。

不多说直接看例子如下：

filter定义的过滤器可以局部，可以全局的下面就直接说全局的

老样子还是等先注册一个全局的过滤器关键字（filter）

全局的注册过滤器是在main.js这个文件里，当然也可以单独的一个js文件里

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全：加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全：加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})

使用起来很方便的，可以在各个组件里凡事有要转换显示时间的都可以用

<template>
{{date | dateconversion}} // 使用方式，就是怎么简单，整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: '' // 后台传来的时间戳
  }
 }
}
</script>

好了！简单的介绍了过滤器使用方法和方式，下一章我会讲稍微复杂点，串联过滤器和带参数的过滤器。

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 杰米