lin_zone
Vue 过滤器的使用
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
lin_zone
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
Vue 过滤器的使用
Vue 过滤器的使用
lin_zone
关注
发布于 2018-11-12 17:04:54
1K
0
发布于 2018-11-12 17:04:54
举报
文章被收录于专栏:
LIN_ZONE
LIN_ZONE
Vue官方文档
是这样说的:Vue过滤器用于格式化一些常见的文本。
在实际项目中的使用:
定义过滤器
在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 }
注册过滤器 在main.js中引入刚刚定义的文件,然后在初始化Vue实例之前加上注册过滤器的语句 Object.keys(filter).forEach(key=>{ Vue.filter(key,filter[key]) })
使用过滤器 使用的时候只需要在{{}} 中想要格式化的变量 后面加上 | ,然后跟上自己定义的过滤器函数的名称,比如:fun_test 即可,该函数默认会接受一个参数,及 | 前的那个值,如果还需要往该函数中传入其他参数,可以这样 | fun_test(param1,param2,...)
本文参与
腾讯云自媒体分享计划
,分享自作者个人站点/博客。
原始发表:2018-10-22 ,如有侵权请联系
cloudcommunity@tencent.com
删除
前往查看
其他
本文分享自
作者个人站点/博客
前往查看
如有侵权,请联系
cloudcommunity@tencent.com
删除。
本文参与
腾讯云自媒体分享计划
,欢迎热爱写作的你一起参与!
其他
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
关注
文章
0
获赞
0
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐