文档章节

vue中进度条的使用

花飘零
 花飘零
发布于 2017/04/25 09:15
字数 169
阅读 102
收藏 0

vue:

                    <table>
                        <thead class="thead">
                            <tr>
                                <th>序号</th>
                                <th>小组名称</th>
                                <th>组长</th>
                                <th>成员人数</th>
                                <th>项目进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in items">
                                <td>{{item.id}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.gradePerson}}</td>
                                <td>{{item.person}}</td>
                                <td>
                                    <div class="progress">
                                        <span class="progressing" v-bind:style=" 'width:' + (item.time/17)*100 +'%' ">
                                            <span class="percentage">{{item.time}}/17</span>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

js:

 data() {
        return {
            items: [
                {
                    id: '01',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '10',
                }, {
                    id: '02',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '5',
                }, {
                    id: '03',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '8',
                }]

        }

}

 

css:

              .progress{
                    width: 100%;
                    height: 15px;
                    background: #f1dea9;
                    border: 1px solid #ecc353 ;
                    border-radius: 10px;
                    text-align: center;
                    color:#fff;
                    .progressing{
                        position: relative;
                        float: left;
                        margin: 0 auto;
                        height: 16px;
                        background: #ecc353;
                        border-radius: 10px;
                        .percentage{
                            margin-left:50px;
                        }
                    }
                }

 

              

 

© 著作权归作者所有

共有 人打赏支持
花飘零
粉丝 0
博文 36
码字总数 4735
作品 0
德州
这才是我想要的彩虹进度条-[vue-ins-progress-bar]

想在 vue 项目中拥有 instagram 那种绚丽的彩虹进度条? 不如试试这个 vue-ins-progress-bar Demo Live Demo Install Usage APIs Source Repository: vue-ins-progress-bar Author: @meloalri......

melo的微博
07/11
0
0
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
09/16
0
0
vue插件开发流程详解-从开发到发布至npm(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,...

阿逗
09/16
0
0
没朋友(mpvue),还有音乐陪你

炎炎夏日,剧烈的高温也抵挡不住对学习的坚持。对于学习,很多时候都会有松懈和逃避的心理,但看到身边近乎疯狂的考研党们,我还是选择了坚持。距离上次发文章已经有一个月之久了,期间学习了...

我服啦
07/23
0
0
Per.js速度对比Vue.js

Per.js速度对比Vue.js 首先,我要承诺,尽管我是Per.js的作者,但是我在这次测试中完全保持公平公正的原则,不对测试结果有一点改动。 由于Vue.js和Per.js的功能巨多,所以无法测试全部功能,...

Skyogo
08/29
0
8

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(一)

转发 TypeScript基础入门之JSX(一) 介绍 JSX是一种可嵌入的类似XML的语法。 它旨在转换为有效的JavaScript,尽管该转换的语义是特定于实现的。 JSX在React框架中越来越受欢迎,但此后也看到了...

durban
32分钟前
0
0
JavaScript使用原型判断对象类型

1. constructor属性 在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们...

Bob2100
33分钟前
1
0
10-《深度拆解JVM》JVM是怎么实现invokedynamic的?(下)

一、问题引入 上回讲到,为了让所有的动物都能参加赛马,Java 7 引入了 invokedynamic 机制,允许调用任意类的“赛跑”方法。不过,我们并没有讲解 invokedynamic,而是深入地探讨了它所依赖...

飞鱼说编程
54分钟前
2
0
457. Circular Array Loop

Description Difficulty : Medium You are given an array of positive and negative integers. If a number n at an index is positive, then move forward n steps. Conversely, if it's n......

52iSilence7
今天
1
0
MySQL SQL 常见用法

某字段重复记录 select a.fieldA from tableA a group by a.fieldA having count(a.fieldA)>1;==select * from (select a.fieldA, count(1) as faCount from tableA a group......

园领T
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部