Vue——页面保留指定小数位数

问题描述：自己计算出来的地块面积填挖方量等都保留了很多位小数，但希望页面上显示的数据保留两位数，而在逻辑交互中做比较判断要很多位小数。

实现途径：vue的过滤器 filters

代码：

<template>
  <div>
    <p>
      <label class="task-info-key" >面积：</label>
      <label class="task-info-value" style="width:220px">{{ selectedObj.SmArea / 100 | rounding }} m<sup>2</sup></label>
    </p>
    <p>
      <label class="task-info-key" >周长：</label>
      <label class="task-info-value" style="width:220px">{{ selectedObj.SmPerimeter / 100 | rounding }} m</label>
    </p>
  </div>
</template >
<script>
export default {
  data() {
    return {
      selectedObj: {
        id: 0,
        SmArea: 0,
        SmPerimeter: 0
      }
    };
  },
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  methods: {
        ...
  }
}
</script>