Vue.js 进度条

关键词：

【中文标题】Vue.js 进度条【英文标题】：Vue.js progress bar 【发布时间】：2017-06-27 05:43:18 【问题描述】：

我正在使用vue.js 2.0我有这个方法：

calculatePercentage(option) 
    let totalVotes = 0;

    this.poll.options.forEach((option) => 
        totalVotes+= option.votes.length;
    );

    return option.votes.length / totalVotes * 100;

这是我的引导进度条：

<div class="span6">
    <div v-for="option in poll.options">
        <strong> option.name </strong><span class="pull-right"> calculatePercentage(option) %</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" style="width: 15%;"></div>
        </div>
    </div>
</div>

所以calculatePercentage(option); 工作正常。但是如何将它绑定到样式（style="width: 15%;"）？

非常感谢

【问题讨论】：

【参考方案1】：

您可以按照here 的说明将内联样式绑定到 vue 数据。您需要做的就是从calculatePercentage 返回值并以如下样式使用它：

<div class="span6">
    <div v-for="option in poll.options">
        <strong> option.name </strong><span class="pull-right"> calculatePercentage(option) %</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" v-bind:style="width: calculatePercentage(option) + '%'"></div>
        </div>
    </div>
</div>

【讨论】：

如何从 Vuetify 进度条计算中删除空值

】如何从Vuetify进度条计算中删除空值【英文标题】：HowtoremovenullvaluesfromVuetifyProgressBarCalculation【发布时间】：2018-10-1301:53:35【问题描述】：我有一个进度条，当您点击页面上的12个复选框时，完成百分比会发生变化。问题是公式... 查看详情

vue.js中滚动条加载更多数据

本文章参考：http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析：1.需要判断滚动条是否到底部：需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。　　scrollTop为滚动条在Y轴上的滚动距离。　　clientHeight为内容可视区域的... 查看详情

在android进度条中删除进度条背景

】在android进度条中删除进度条背景【英文标题】：Removeprogressbarbackgroundinandroidprogressbar【发布时间】：2014-08-0516:20:51【问题描述】：如何去除灰色背景，只在进度条中显示蓝色进度条。【问题讨论】：见***.com/questions/16893209/…这... 查看详情

processbar进度条

1.进度条关键属性2.进度条的常用方法progress=(ProgressBar)findViewById(R.id.horiz);（1）获取第一进度条：progress.getProgress();（2）获取第二进度条：progress.getSecondaryProgress();（3）获取最大进度条：progress.getMax();（4）增加进度条刻度：progres... 查看详情

闲话进度条

 　　对于程序员来说，进度条（progressbar）大家都很熟悉，进度条有不同的展现形式，包括传统的横向进度条以及各种loading图;也有不同的实现方法，各种黑科技黑魔法。本文探讨两个问题，第一个为什么要有进度条;第二个... 查看详情

进度条与拖动条的使用学习(代码片段)

（一）进度条常用属性详解：android:max：进度条的最大值android:progress：进度条已完成进度值android:progressDrawable：设置轨道对应的Drawable对象android:indeterminate：如果设置成true，则进度条不精确显示进度android:indeterminateDrawable：设置... 查看详情

制作进度条(uislider)

怎样判断是否应当使用进度条　　用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比，进度条分为可拖动和不可拖动两种。　　可拖动进度条和不可拖动进度条的原理几乎是一模一样，唯一的区别... 查看详情

圆角进度条，带数字居中显示的圆角进度条

自己实现一个圆角进度条，待文字显示居中的圆角进度条，这在很多实际项目当中都会用到的github地址：https://github.com/yongfengnice/CircleProgress效果图如下所示： 查看详情

flutter进度条(代码片段)

条形进度条value：表示当前进度，取值范围为[0,1]。如果value为null则进度条会执行循环动画（模糊进度）；如果value不为null，则进度条有具体进度。valueColor：进度条颜色。可以通过AlwaysStoppedAnimation指定... 查看详情

css静态进度条效果

今天学习到了实现一个静态进度条的方法，固写一篇笔记稳固一下自己的知识。最终的效果如下，进度条放在一个框里，水平宽自适应。现在就开始，首先写一个进度条先。.progress-bar{/*进度条的槽*/width:47%;/*设置进度条的高度*/h... 查看详情

delphixeandroid更改progressbar1进度条颜色

下面是安卓学习手册中实现各种进度条的截图：要想看各种进度条的实现代码和文档，直接去360手机助手中下载安卓学习手册，例子文档随便看。1、说明　　在某些操作的进度中的可视指示器，为用户呈现操作的进度，还它有... 查看详情

使用引导进度条的 Rails 动态数据进度条

】使用引导进度条的Rails动态数据进度条【英文标题】：Railsdynamicdataprogressbarusingbootrapprogressbar【发布时间】：2021-10-3001:01:17【问题描述】：您好，任何人都可以帮助尝试获取bootrap5进度条以显示我的会议表中的动态数据吗？Rails6... 查看详情

使用jquery一一显示进度条

】使用jquery一一显示进度条【英文标题】：Displayprogressbaronebyoneusingjquery【发布时间】：2012-06-2806:14:18【问题描述】：我有一个带有进度条的图像列表。我想一张一张地显示进度条。这意味着我有5个图像和5个进度条。当我点击上... 查看详情

android怎么自定义绘制如下图中这种进度条

下面是安卓学习手册中实现各种进度条的截图：要想看各种进度条的实现代码和文档，直接去360手机助手中下载安卓学习手册，例子文档随便看。1、说明　　在某些操作的进度中的可视指示器，为用户呈现操作的进度，还它有... 查看详情

progressbar---进度条

最近在处理标题进度条时，耗费了一些时间，现在总结一下ProgressBar的相关知识，有不对的地方请大神们批评指正！进度条主要有以下三种：1.对话框进度条2.标题进度条  注意：requestWindowFeature(),setContentView(),setProgressBarInd... 查看详情

长按如何使进度条变化android

参考技术A通过MediaPlayer调节。系统自带的进度条的颜色比较单调，实际开发中使用较少，可以自定义进度条背景，新建一个progressbarbg.xml文件。gradient可以设置进度条的渐变色，android：endColor和android：startColor可以设置渐变开始和... 查看详情

android进度条样式怎么改

Android系统提供了两大类进度条样式，长形进度条(progressBarStyleHorizontal)和圆形进度条(progressBarStyleLarge)。android进度条样式更改：第一种（默认样式(中等圆形)）第二种（长方形进度条）进度条用处很多，比如，应用程序装载资源... 查看详情

异步下载圆形进度条显示进度

圆形进度条参考链接即可：使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度：1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 2.遮罩层：.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情