vue货币格式化组件、局部过滤功能以及全局过滤功能

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、在这里介绍一个vue的时间格式化插件: moment

使用方法：
.npm install moment --save.

2 定义时间格式化全局过滤器

在main.js中导入组件

import moment from 'moment'

Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return moment(dataStr).format(pattern)

})

filter两个参数第一个是函数名第二个是时间格式化处理的函数

3 只需要在需要格式化时间的地方使用插值表达式就OK了

<p class="subtitle">
<span>发表时间：{{ newsinfo.add_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
<span>点击{{ newsinfo.click }}次</span>
</p>

第二种方法

引入moment.js

let moment = require("moment");

export default {

data() {

return {

}

可以直接使用了

if(this.ruleForm2.startTime == '' || this.ruleForm2.startTime == null || this.ruleForm2.startTime == undefined){

this.ruleForm2.startTime = ''

}else {

this.ruleForm2.startTime = moment(this.ruleForm2.startTime).format('YYYY-MM-DD')

}

如果是想要转化为年月日分秒

this.ruleForm2.startTime = moment(this.ruleForm2.startTime).format('YYYY-MM-DD HH-mm'）

</script>

二、货币格式化

在页面中，例如价格数据，不管是后台传递过来的还是前台计算之后显示在页面上的，一般都只是一个数字没有格式，完整的格式应该是

要实现这个其实很简单，vue的过滤功能就很好的能解决这个问题，什么叫做过滤，就是将元数据进行相应的处理在显示出来。

首先建立一个 js 文件 currency.js

const digitsRE = /(\d{})(?=\d)/g/**
* value 金额
* currency 货币符号
* decimals 保留位数
*/
export function currency (value, currency, decimals) {
value = parseFloat(value)
if (!isFinite(value) || (!value && value !== )) return ''
currency = currency != null ? currency : '$'
decimals = decimals != null ? decimals :
var stringified = Math.abs(value).toFixed(decimals)
var _int = decimals
? stringified.slice(, - - decimals)
: stringified
var i = _int.length %
var head = i >
? (_int.slice(, i) + (_int.length > ? ',' : ''))
: ''
var _float = decimals
? stringified.slice(- - decimals)
: ''
var sign = value < ? '-' : ''
return sign + currency + head +
_int.slice(i).replace(digitsRE, '$1,') +
_float
}