文档章节

vue中进度条的使用

花飘零
 花飘零
发布于 2017/04/25 09:15
字数 169
阅读 90
收藏 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
博文 32
码字总数 3237
作品 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
没朋友(mpvue),还有音乐陪你

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

我服啦
07/23
0
0
Vue 全家桶实现网易云音乐 WebApp

基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。 项目演示地址:移...

CaiJinyc
05/16
0
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template script 核心js文件 将uploadFile.js挂载带vue上面

hkaikai
07/20
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内存模型是怎么解决缓存一致性的?

在再有人问你Java内存模型是什么,就把这篇文章发给他。这篇文章中,我们介绍过关于Java内容模型的来龙去脉。 我们在文章中提到过,由于CPU和主存的处理速度上存在一定差别,为了匹配这种差距...

Java填坑之路
15分钟前
1
0
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
16分钟前
0
0
Angular进阶之路

【初级】会写页面,能出东西。 给定环境和 rest API,不用第三方库,能在十分钟内完成一个 master/detail 结构的带路由的应用(可以不管美观)。 知识点:Angular CLI、组件、路由、HTTP 服务...

陆小七的主页
19分钟前
0
0
Redis缓存数据库安全加固指导(一)

背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一位,但是原生...

中间件小哥
19分钟前
0
0
百万级数据mysql分区

1. 什么是表分区? 表分区,是指根据一定规则,将数据库中的一张表分解成多个更小的,容易管理的部分。从逻辑上看,只有一张表,但是底层却是由多个物理分区组成。 2. 表分区与分表的区别 分表...

罗文浩
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部