前端进度条组件的百分比值改为整数值显示

奋斗者格洛古

已于 2024-01-09 15:26:39 修改

阅读量540

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-10 09:48:05 首次发布

本文链接：https://blog.csdn.net/m0_57005111/article/details/131632104

版权

要将Vue进度条组件的值从百分比改成整数，可以使用Vue的计算属性来处理。首先，将进度条组件的值绑定到一个数据属性上，然后创建一个计算属性，将百分比值乘以1或者10或者100并转换为整数形式。以下是示例代码：

<template>
  <div>
<Progress :percent="percent" ><p>{{ intValue }}</p></Progress>
 </div>
</template>

<script>
export default {
  data() {
    return {
//如果此处返回的是整数，那么下面的计算属性中乘1即可
      percent: 0.75
    };
  },
  computed: {
    intValue() {
      return Math.round(this.percent * 100);
    }
  }
};
</script>

这样，进度条组件的值会以整数形式显示在p标签中。

如果需要将渲染的进度条换算成500为最大值的时候，我们需要在进度条渲染的值做一个计算属性去换算需要的比例。代码如下；

 //结构中
    <YsProgress :percent="SpeedShow">
              <p style="">{{ intValue }}</p>
   </YsProgress>

//计算属性中
computed: {
  SpeedShow() {

    //此处为后端返回的值.假设渲染进度最大为500，那么原先最大值100%就需要进行一下换算
      return Math.round(this.SpeedData * 0.2); 
    },

}