需求就是将很多个数据，以进度条的形式展示在页面上，形成一个可视化。

接下来是html代码

<!DOCTYPE html>

<html>

<head>

    <title>在v-for中给css传递一个数组参数</title>

    <style type="text/css">

        .main {

          padding-top: 4%;

          padding-left: 60px;

        }

        .content {

          display: flex;

          flex-direction: row;

          flex-wrap: nowrap;

          justify-content: flex-start;

          padding-top: 1%;

        }

        li {

          list-style: none;

          padding: 7px 0;

        }

        .name {

          padding-right: 100px;

          height: 22px;

          width: 140px;

          font-size: 22px;

          font-family: MicrosoftYaHei;

          font-weight: 400;

          color: black;

        }

        .value {

          padding-left: 60px;

          width: 120px;

          height: 20px;

          font-size: 25px;

          font-weight: 400;

          color: rgba(108, 231, 246, 1);

        }

    </style>

</head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

<div id="box">

    <div class="main">

      <li v-for="(item,index) in targetAssete" :key="item.index">

        <div class="content">

          <div class="name">{{item.name}}</div>

          <div

            style="background-color:black;height:27px;width:276px; border-radius:14px 14px 14px 14px;"

          >

            <div v-if="index<1" :style="one_style"></div>

            <div v-else-if="index<2" :style="two_style"></div>

            <div v-else :style="[three_style, {width:[width_datas[index]]}]"></div>

          </div>

          <div class="value">{{item.value}}</div>

        </div>

      </li>

    </div>

  </div>

</body>

</html>

<script type="text/javascript">

    new Vue({

        el:'#box',

        data(){

            return{

                targetAssete:[

                    {name:'第一条',value:40},

                    {name:'第二条',value:30},

                    {name:'第三条',value:20},

                    {name:'第四条',value:10}

                ],

                width_datas:[],

                one_style:{

                    background: "rgba(173, 215, 67, 1)",

                    height: "30px",

                    width: "40px",

                    "border-radius": "14px"

                  },

                two_style: {

                    background: "rgba(239, 144, 58, 1)",

                    height: "30px",

                    width: "30px",

                    "border-radius": "14px"

                  },

                three_style: {

                    background: "rgba(80,175,178,1)",

                    height: "30px",

                    width:"20px",

                    "border-radius": "14px"

                  },

                }

            },

        methods:{

         getType(){

            let sum = 0;

            for (var i = 0; i < this.targetAssete.length; i++) {

              sum += this.targetAssete[i].value;

            }

            var numbers = [];

            for (var a = 0; a < this.targetAssete.length; a++) {

              numbers.push(

                ((this.targetAssete[a].value / sum) * 100).toFixed(2) + "%"

              );

            }

            this.width_datas = numbers;

            this.one_style.width = numbers[0];

            this.two_style.width = numbers[1];

              }

        },

        mounted(){

            this.getType()

    }

})

</script>

最后的效果 如下图所示：

第一列为显示的名称；

第二列为数据可视化；

第三列为具体的数据；

Vue在v-for中给css传递一个数组参数的更多相关文章

  1. Django路由系统---django重点之url传递一个默认参数

    django重点之url传递一个默认参数 可以利用这个特性,让2个URL映射一个函数,但是返回2个不同的HTML url(r'default_param1', views.def_param,), u ...

  2. [K/3Cloud] 动态表单打开时传递一个自定义参数并在插件中获取

    插件中在调用动态表单时,通过DynamicFormShowParameter的CustomParams,增加自定义的参数. /// <summary> /// 库存查询 /// </ ...

  3. 解决JavaScript中使用$.ajax方式提交数组参数

    一般的,可能有些人在一个参数有多个值的情况下,可能以某个字符分隔的形式传递,比如页面上有多个checkbox: $.ajax{ url:"xxxx", data:{ p: &quo ...

  4. 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题

    想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服 ...

  5. HTML 相同name 传递一个数组

    今天发现一个很厉害的东西 在input表单中,name名称可以是一个,后面[],里面跟名称,和数组一样,传递到PHP中也是一个数组 <html> <body> <form ...

  6. mybatis 中sql语句传递多个参数

    Available parameters are [2, 1, 0, param1, param2, param3] <select id="loginByTeacher"  ...

  7. springMVC中使用ajax传递json数组

    解决方法 去www.json.org下载JSON2.js 再调用JSON.stringify(JSONData)将JSON对象转化为JSON串. var people = [{ "UserN ...

  8. springMVC中a标签传递多个参数到后台的应用

    1.js页面:返回json填充HTML部分代码 <a class='byCard' href="+path+"/static/toCardView/"+ data. ...

  9. MVC中使用ajax传递json数组

    解决方法 去www.json.org下载JSON2.js再调用JSON.stringify(JSONData)将JSON对象转化为JSON串. var people = [{ "UserNa ...

随机推荐

  1. tensorflow对鸢尾花进行分类——人工智能入门篇

    tensorflow之对鸢尾花进行分类 任务目标 对鸢尾花数据集分析 建立鸢尾花的模型 利用模型预测鸢尾花的类别 环境搭建 pycharm编辑器搭建python3.* 第三方库 tensorflow1 ...

  2. 写给.NET开发者的Python教程(二):基本类型和变量

    从本文开始,我们就要正式了解Python的语法特性了,这章主要介绍基本类型和变量,开始之前先介绍下Python中的标准输入输出. 标准输入输出 前文举过TwoSum问题的例子,但是没有讲到标准输入输出 ...

  3. C++语法小记---多重继承

    多重继承 工程中不建议使用多继承,因为多继承带来的问题比带来的便利多,已被放弃 问题一:多重继承的对象,向上获取指针时,有不同的地址 ----无法解决 问题二:菱形继承问题,导致成员冗余 ----虚继 ...

  4. python基础--小数据池，代码块的最详细、深入剖析

    本文转至太白金星 一,id,is,== 在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都会在内存中开辟一个空间,将这个数据临时加在到内存 ...

  5. mysql字符集 utf8 和utf8mb4 的区别

    一.导读我们新建mysql数据库的时候,需要指定数据库的字符集,一般我们都是选择utf8这个字符集,但是还会又一个utf8mb4这个字符集,好像和utf8有联系,今天就来解析一下这两者的区别. 二.起 ...

  6. 撸了一个 Feign 增强包

    前言 最近准备将公司的一个核心业务系统用 Java 进行重构,大半年没写 Java ,JDK 都更新到 14 了,考虑到稳定性等问题最终还是选择的 JDK11. 在整体架构选型时,由于是一个全新的系统 ...

  7. Python os.minor() 方法

    概述 os.minor() 方法用于从原始的设备号中提取设备minor号码 (使用stat中的st_dev或者st_rdev field ).高佣联盟 www.cgewang.com 语法 minor ...

  8. Python os.getcwdu() 方法

    概述 os.getcwdu() 方法用于返回一个当前工作目录的Unicode对象.高佣联盟 www.cgewang.com Unix, Windows 系统下可用. 语法 getcwdu()方法语法格 ...

  9. Skill 脚本演示

    https://www.cnblogs.com/yeungchie/ Schematic ycBusNet.il 用于原理图中按照一定格式,批量创建 Bus . ycNetToPin.il 通过选中一 ...

  10. 程序员面试：C/C++求职者必备 20 道面试题，一道试题一份信心！

    面试真是痛并快乐的一件事,痛在被虐的体无完肤,快乐在可以短时间内积累很多问题,加速学习. 在我们准备面试的时候,遇到的面试题有难有易,不能因为容易,我们就轻视,更不能因为难,我们就放弃.我们面对高薪就 ...