vue的过滤器
版本二的时候Vue把所有过滤器都砍掉了,需要自己写;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<p>{{num | toRMB}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// filter 过滤器: 数据格式化,比如,后端返回我们的是数据格式是一个时间戳,在页面中使用的时候需要变成真正的时间格式;下面我们写一个输入金额:123456.789后准换成¥123,456.79这样的格式:
var vm = new Vue({
el:'#app',
data:{
num:'12345.6789'
},
filters:{
toRMB(value){
if(!parseFloat(value)){
return "金额有误,请检查输入";
}
//保留两位小数
value = parseFloat(value).toFixed(2);
//将字符串按.分割为数组 第一个元素为正数部分 第二个为小数部分
var arr = value.split(".");
//将整数部分字符串拆分为数组 仍然存入 arr[0]
arr[0] = arr[0].split("");
//遍历整数部分数组 由倒数第三位开始 每一位增加逗号
for(var i = arr[0].length-3; i > 0; i -= 3){
arr[0].splice(i,0,",");
}
//将整数部分数组合并为字符串
arr[0] = "¥" + arr[0].join("");
//返回整个金额
return arr[0] + "." + arr[1];
}
}
})
</script>
</html>