zoukankan      html  css  js  c++  java
  • vue 升降排序

    本实例是根据工作进度的百分比来进行排序。

    html

    <div class="ibox-content">
    <li v-for="(rangeItem,index) in range" :key="index" class="rankLi">
    <span class="rankSpan">{{index+1}}</span>
    <a class="rankA">{{rangeItem.name}}</a>
    <div class="progress progress-striped active">
    <div class="progress-bar" :style="{rangeItem.percent+'%'}"
    aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar">
    <span class="sr-only"></span>
    </div>
    </div>
    <span class="proPercent">{{rangeItem.percent}}%</span>
    </li>
    </div>
    script

    export default {
    name: "TP300", //组件的名称
    data() {
    return {
    rangeList: [
    { name: "TP001", percent: "75" },
    { name: "TP002", percent: "30" },
    { name: "TP003", percent: "20" },
    { name: "TP004", percent: "15" },
    { name: "TP005", percent: "80" },
    { name: "TP006", percent: "35" },
    { name: "TP007", percent: "49" },
    { name: "TP008", percent: "46" }
    ]
    };
    },
    computed: {
    range: function() {
    // return this.rangeList.sort((a,b)=>a.percent<b.percent);//降序,此方法在数据量多的时候会乱序,不明其理
    return this.rangeList.sort((a, b) => a.percent - b.percent).reverse()//结合reverse(),成功实现降序排列
    computed: {
    range: function() {
    return this.rangeList.sort((a,b)=>a.percent-b.percent);//升序
    }
    }
    降序:                                                                                                  升序:
                                                           
    --

  • 相关阅读:
    第三周学习笔记
    Python简易购物车程序
    记录回忆,谢谢你,别忘了我。
    学习第二周
    入园3个月首次写个帖
    Linux系统mysql多实例主从
    linux系统开机流程和启动nginx
    linux系统rsync命令
    linux监控进程状态命令自定义rpm包及kill命令
    linux搭建yum仓库
  • 原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10725340.html
Copyright © 2011-2022 走看看