1.全局过滤器
<div id="app">
<h2>{{price | currecy('#')}}</h2>
<h2>{{price | decimal(2)}}</h2>
<h2>{{price | decimal(1) | currecy('$')}}</h2>
<h2>{{username | capitalize}}</h2>
<h2>{{money | thousandthPercentile}}</h2>
</div>
<script src="./vue.js"></script>
<script>
// | 读作管道
//全局注册过滤器
// Vue.filter(过滤器名称, 处理函数)
//定义货币格式化
Vue.filter('currecy', (v, char) => {
console.log('v ==> ', v);
//v: 需要格式化的数据
//char: 其他货币符号
return char + v;
})
Vue.filter('decimal', (v, n) => {
//v: 需要格式化的数据
//n: 小数位
return v.toFixed(n);
})
//首字母大写过滤器 ivEn
Vue.filter('capitalize', v => {
return v[0].toUpperCase() + v.slice(1).toLowerCase();
})
//处理千分位过滤器 98261652.89267 ==> 98,261,652.89267
//toLocaleString(): 千分处理在安卓不支持
Vue.filter('thousandthPercentile', v => {
console.log('v ==> ', v);
//切割，分为整数部分和小数部分
let nums = v.toString().split('.');
console.log('nums ==> ', nums);
//整数部分
let ints = nums[0];
//a = 98261652
// i = 7
// a.slice(i - 2, i + 1) ==> slice(5, 8)
// i = 4
//a.slice(i - 2, i + 1) ==> slice(2, 5)
// i = 1
//a.slice(i - 2, i + 1) ==> slice(-1, 2) 如果 i - 2 <= 0, 从零开始
let intNums = [];
for (let i = ints.length - 1; i >= 0; i -= 3) {
let index = i - 2 <= 0 ? 0 : i - 2;
let int = ints.slice(index, i + 1);
intNums.unshift(int);
}
intNums = intNums.join(',');
console.log('intNums ==> ', intNums);
//判断是否存在小数
if (nums[1] !== undefined) {
intNums = `${intNums}.${nums[1]}`;
}
return intNums;
})
new Vue({
el: '#app',
data: {
price: 500,
username: 'kevin',
money: 98261652.89267
}
})
</script>
