首页 > web前端 > js教程 > 正文

在vue中如何使用filter过滤器

亚连
发布: 2018-06-12 14:31:26
原创
3650 人浏览过

vue的过滤器通常用在一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。本文给大家介绍了web前端vue filter 过滤器的相关知识,感兴趣的朋友一起看看吧

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: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细介绍js中有关promise的知识点

在jQuery中如何解决niceScroll滚动条错位问题

在JS中如何实现百度搜索接口

以上是在vue中如何使用filter过滤器的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!