在 vue-cli 项目中渲染数据到页面时一些数据处理方法的封装

1\ 封装处理条件为假的数据

<script>
methods: {
	judgeNull1(data) {
	      if (data == undefined || data == null || data == "null") {
	        return "";
	      } else {
	        return data;
	      }
	}
}
</script>

<template>
	<div>
		<span>逃费车辆span>	
		<i>{{judgeNull1(tfcl)}}i> 辆	
		
		<i>{{tfcl ? tfcl : ""}}i> 辆	
	div>
template>

2\ 数据值较大时使用千位分隔符，方便用户阅读

<script>
methods: {
	formatNumber(num) {
      if (num) {
        var reg = /^(\+|-)?(\d+)(\.\d+)?$/;
        if (!reg.test(num)) {
          return num;
        }
        var a = RegExp.$1,
          b = RegExp.$2,
          c = RegExp.$3;
        var re = new RegExp("(\\d)(\\d{3})(,|$)");
        while (re.test(b)) b = b.replace(re, "$1,$2$3");
        return a + "" + b + "" + c;
      } else {
        return "0";
      }
    }
}
</script>

<template>
	<div>
		<span>逃费金额span>	
		<i>{{formatNumber((tfje / 100).toFixed(0))}}i> 元	
	div>
template>