美文网首页壁纸小家程序员让前端飞
web前端vue:过滤器(filter)

web前端vue:过滤器(filter)

作者: 玩点小技术 | 来源:发表于2018-01-11 23:43 被阅读84次

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>

好了!简单的介绍了过滤器使用方法和方式,下一章我会讲稍微复杂点,串联过滤器和带参数的过滤器。
有不懂的朋友或喜欢vue的可以加我微信(nihaomeili87)我们一起进步!等你噢~

相关文章

  • web前端vue:过滤器(filter)

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

  • 9.自定义vue全局过滤器

    1.Vue.filter('过滤器名字',过滤器函数):

  • Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过...

  • Java Web 之过滤器

    前言 学一学Java Web 三大组件之一过滤器。 Filter过滤器 Filter过滤器用来对Web资源进行一些...

  • 8、Filter过滤器

    1、什么是过滤器? Filter也称之为过滤器。Web开发人员通过Filter技术,对web服务器管理的所有web...

  • 过滤器

    Filter简介 Filter也称之为过滤器,WEB开发人员通过Filter技术,对web服务器管理的所有web资...

  • 过滤器

    Filter简介 Filter也称之为过滤器,WEB开发人员通过Filter技术,对web服务器管理的所有web资...

  • Filter,Listener

    Filter基本使用 过滤器Filter作为Web的组件,能对所有Web资源(Jsp,Servlet,,静态图片或...

  • 王龙

    过滤器div: {{123.456|ab}} 1全局过滤器: Vue.filter('abc'...

  • Filter,Interceptor,AOP 区别与使用方法

    1.Filter过滤器 过滤器拦截web访问url地址。 严格意义上讲,filter只是适用于web中,依赖于Se...

网友评论

    本文标题:web前端vue:过滤器(filter)

    本文链接:https://www.haomeiwen.com/subject/xkhxoxtx.html