大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
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 // 返回转换后的值 })
使用起来很方便的,可以在各个组件里凡事有要转换显示时间的都可以用
{{date | dateconversion}} // 使用方式,就是怎么简单,整个项目随便用
好了!简单的介绍了过滤器使用方法和方式,下一章我会讲稍微复杂点,串联过滤器和带参数的过滤器。