Vue在v-for中給css傳遞一個數組參數

本文轉載自查看原文 2020-05-28 10:49 1005 css/ vue

需求就是將很多個數據，以進度條的形式展示在頁面上，形成一個可視化。

接下來是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>

最后的效果如下圖所示：

第一列為顯示的名稱；

第二列為數據可視化；

第三列為具體的數據；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中v-for數組和對象的循環 vue中v-for的用法以及參數的作用 vue v-show與v-for同時配合v-bind使用並在href中傳遞多個參數的使用方法 Vue v-for 循環數組、對象、數字時參數的順序 Vue中的v-for vue v-for(數組遍歷) 14 vue中v-for 循環對象數組 vue 對 v-for 中數組進行過濾操作 13 vue中v-for循環普通數組 vue在v-for中根據index和其他數據同時決定item的css樣式