专栏首页LIN_ZONEVue 过滤器的使用

Vue 过滤器的使用

  1. Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本。
  2. 在实际项目中的使用:
    1. 定义过滤器
      1. 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot default 将定义的函数暴露出来 //将时间戳转化为日期格式 function formatDate (value, fmt='') { let date = new Date(value) if (fmt=='') fmt = 'Y-MM-dd hh:mm' let o = { 'Y+':date.getFullYear(), 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; }; function padLeftZero (str) { return ('00' + str).substr(str.length); }; //将数字格式化为容易查看的格式 function formatNumber(num){ if (num>= 1000000) { return (num/1000000).toFixed(1).replace(/.0$/, '') + 'w'; } if (num>= 1000) { return (num/1000).toFixed(1).replace(/.0$/, '') + 'k'; } return num; } //暴露函数 export default { formatDate, formatNumber }
    2. 注册过滤器 在main.js中引入刚刚定义的文件,然后在初始化Vue实例之前加上注册过滤器的语句 Object.keys(filter).forEach(key=>{ Vue.filter(key,filter[key]) })
    3. 使用过滤器 使用的时候只需要在{{}} 中想要格式化的变量 后面加上 | ,然后跟上自己定义的过滤器函数的名称,比如:fun_test 即可,该函数默认会接受一个参数,及 | 前的那个值,如果还需要往该函数中传入其他参数,可以这样 | fun_test(param1,param2,...)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • group by 多个字段

    众所周知,group by 一个字段是根据这个字段进行分组,那么group by 多个字段的结果是什么呢?由前面的结论类比可以得到,group by 后跟多个子...

    lin_zone
  • 并发场景下常见的锁及简单使用

    1.MySQL悲观锁 悲观锁:顾名思义,对待过来的请求持比较悲观的态度,在处理请求的整个过程中,将数据锁定,不允许其他进程/线程 修改

    lin_zone
  • ubuntu下nodejs和npm的安装及升级

    参考:https://segmentfault.com/a/1190000007542620

    lin_zone
  • mysql insert into ..select 发生死锁问题。

    mysql 对于业务较为复杂的功能,我们常常使用存储过程进行编辑数据库的操作,当我们在进行数据库的操作时,进行着函数的嵌套或者是数据的算法较为复杂时,

    爱明依
  • 【长文】Spring Cloud OAuth Token 生成源码解析

    内容较长,spring security oauth 整个放发过程的类都有详细说明,建议大家保存后 慢慢阅读,或者当工具书查询

    冷冷
  • Python 代码规范之 import

    我想我现在已经养成了PEP8强迫症了,看代码的时候一旦发现有地方不符合我已知的规范就有冲动去改掉它。 这里说的PEP8就是Python官方提出的:Style G...

    the5fire
  • asreml 设定初始值 固定初始值

    一个朋友问我,如何固定asreml的初始值,现在分为单性状和多性状进行说明。 为何要固定初始值: 1,由于群体较小,估算的方差组分不准确,需要手动设定初始值,直...

    邓飞
  • 定价感人? 冰穹VR《源震》21日发布

    VRPinea
  • 腾讯云 Serverless CI/CD 自动化部署实战

    本文将为大家讲解 Serverless 工作原理、架构优势和 Serverless 应用的开发流程,以及如何使用 Serverless CI/CD 能力进行自...

    腾讯云serverless团队
  • 002.Kubernetes简单入门实例

    提示:若不关闭鉴权,可能出现以下报错:Error creating: No API token found for service account "defau...

    木二

扫码关注云+社区

领取腾讯云代金券