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: '' // 后台传来的时间戳 } }}</script>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
详细介绍js中有关promise的知识点
在jquery中如何解决nicescroll滚动条错位问题
在js中如何实现百度搜索接口
以上就是在vue中如何使用filter过滤器的详细内容。