Vue小数点后两位怎么取值？

一、toFixed()方法

toFixed()方法是JavaScript内置的函数，可以用来将数字转为字符串，且保留指定位数的小数。

let num = 3.1415926;
let str = num.toFixed(2);
console.log(str); // "3.14"

在Vue中，可以通过将数据绑定至一个计算属性来使用toFixed()方法。

   

<script>
export default {
  data() {
    return {
      num: 3.1415926,
    };
  },
  computed: {
    floatNum() {
      return this.num.toFixed(2);
    },
  },
};
</script>

二、自定义过滤器

Vue的过滤器是可以自定义的，可以用来处理数据的显示格式。

   

<script>
export default {
  data() {
    return {
      num: 3.1415926,
    };
  },
  filters: {
    fixedTwo(val) {
      return val.toFixed(2);
    },
  },
};
</script>

三、v-model修饰符

在Vue中，可以通过v-model修饰符来控制输入框的小数位数。

   

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
};
</script>

在这个例子中，v-model.number修饰符告诉Vue把输入框的值转换为数字类型，step属性指定了每次改变的步数为0.01。

四、计算属性+Math.round()

对于需要四舍五入的情况，可以使用计算属性+Math.round()的方法。

   

<script>
export default {
  data() {
    return {
      num: 3.1415926,
    };
  },
  computed: {
    roundedNum() {
      return Math.round(this.num * 100) / 100;
    },
  },
};
</script>

在这个例子中，计算属性roundedNum实现了对num的四舍五入操作。