Taylor_224 2022-11-15 10:45 采纳率: 66.7%
浏览 11
已结题

vue怎么在进度条内实现 数字/数字 的样式

vue怎么在进度条内实现 数字/数字 的样式
需要实现的效果：

img


我用percentage就自动会把它算成百分比，怎样才能让它的进度条会按百分比显示，但里面的文字是数字/数字的形式显示

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-11-15 11:03
    关注

    按照你 的说法 ，需要把百分比 转换成 分数？x/50 。可以用 formter自定义显示能容。

    比如 进度条的10% 转换成 50*10%=5 那么 应该显示 5/50

    img

    上面这个 进度条的70% 。就是50的 35

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

  • 基于VUE步骤进度条样式代码
    2021-06-24 11:56
    在这个“基于VUE步骤进度条样式代码”项目中，我们可以预期以下关键知识点： 1. **Vue.js基础**：Vue.js的核心特性包括声明式渲染、指令系统（如v-if和v-for）、计算属性、组件化等。开发者需要对这些基础知识有...
  • 前端开发基于Vue.js的自定义进度条组件设计与实现：动态渲染进度段及动画效果处理
    2025-05-31 10:40
    内容概要：本文详细介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件能够根据传入的数据动态渲染进度段，支持动画效果和内容展示。组件的核心功能包括：接受进度段数据数组作为输入、动态计算各进度...
  • Vue 进度条组件怎么实现？
    2024-05-31 09:15
    优联前端的博客 【代码】Vue 进度条组件怎么实现？
  • #前端#Vue追加样式，实现动态进度条/仪表盘
    2022-02-17 19:01
    Miraitowa_chole的博客 #前端#追加样式，动态修改进度条/仪表盘？
  • Vue分段式进度条实现[代码]
    2025-11-17 07:11
    本文探讨了一个在Vue.js框架中实现分段式进度条的解决方案。作者发现现有的Element-ui和Ant design Vue框架中没有现成的组件能够满足特定需求，因此决定自行构建一个定制的进度条组件。 该组件的核心功能在于接受一...
  • Vue蛇形进度条实现[代码]
    2025-11-14 12:06
    在软件开发领域，前端技术不断进步，Vue框架作为其中一颗璀璨的明星，因其响应式和组件化的特性在开发中广泛应用。Vue蛇形进度条的实现不仅是一个简单的视觉效果，更是一项结合了数据绑定、条件渲染和样式应用的综合...
  • Vue 项目中自定义进度条的实现方法与技巧
    2025-06-01 08:45
    小焱写作的博客 摘要 本文介绍了如何使用Vue.js创建自定义进度条组件，实现动态渲染进度段、动画效果和内容展示等功能。组件通过传入数组数据动态计算各段宽度和样式，支持动画效果触发和超出部分红色警示。文章详细讲解了组件设计...
  • Vue 中动态实现进度条
    2025-02-25 16:38
    x-z-y的博客 在 Vue 中动态实现进度条，基本上有两种常见的方法：直接通过 Vue 数据绑定控制样式，或者利用外部库来实现更复杂的功能。我们会深入探讨这两种方式，并且详细说明每种方法的实现步骤、优缺点以及使用场景。
  • 基于VUE步骤进度条样式特效代码
    2021-03-20 01:00
    在本文中，我们将深入探讨如何使用Vue.js框架创建一个具有步骤进度条样式的特效代码。Vue.js是一个轻量级的JavaScript框架，它以其简洁的API和强大的功能深受开发者喜爱。在"基于Vue步骤进度条样式特效代码"项目中，...
  • vue 实现进度条效果
    2021-10-18 14:43
    她和海水一样咸的博客 这里实现进度条用到了es6语法的模版字符串，通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条： html代码不需要改变： <div class="scheduleCont_1_left_1" :class="10 >= 100 ? 'nobg' : ...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 11月23日
  • 已采纳回答 11月15日
  • 创建了问题 11月15日