vue道具data....Can你带一个吗？

Question

我想给不同的颜色取决于5%的电池。问题是颜色不是每个电池，而是分散在整个电池上。

这可能是因为bmss的数据同时出现。但我不知道怎么解决这个问题。它是实现的，直到电池变化，根据%在绿色。全电池图像

问题是颜色。彩色电池图像

https://codesandbox.io/s/battery-lx3dqz?file=/src/App.vue

数据vue

  <template>
      <div id="charging_div" class="frame">
        <div>
          <div id="charging_top_div">
            <div v-for="(bms, index) in bmss" :key="index">
              <div id="charging_left_div">
                <ProgressBattery :bmss="bms" />
                <span>{{ bmss[index].soc }}</span>
              </div>
            </div>
          </div>
          <div class="accumulate">
            <p>{{ time }} kW</p>
            <p>{{ power }} kW</p>
          </div>
          <div id="charging_bottom_div">
            <button id="harging_btn" v-on:click="click_stopCharging_btn">
              stop charging
            </button>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import ProgressBattery from "./ProgressBattery.vue";
    
    export default {
      name: "connect",
    
      components: {
        ProgressBattery,
      },
    
      data() {
        return {
          time: "",
          power: "",
          bmss: [
            {
              soc: 5,
            },
            {
              soc: 45,
            },
            {
              soc: 20,
            },
            {
              soc: 100,
            },
            {
              soc: 30,
            },
          ],
        };
      },

提取vue

 <template>
      <div id="progress-bar-battery">
        <div class="box">
          <span v-if="this.bmss.soc >= 100" class="item" id="v100"></span>
          <span v-if="this.bmss.soc >= 90" class="item" id="v90"></span>
          <span v-if="this.bmss.soc >= 80" class="item" id="v80"></span>
          <span v-if="this.bmss.soc >= 70" class="item" id="v70"></span>
          <span v-if="this.bmss.soc >= 60" class="item" id="v60"></span>
          <span v-if="this.bmss.soc >= 50" class="item" id="v50"></span>
          <span v-if="this.bmss.soc >= 40" class="item" id="v40"></span>
          <span v-if="this.bmss.soc >= 30" class="item" id="v30"></span>
          <span v-if="this.bmss.soc >= 20" class="item" id="v20"></span>
          <span v-if="this.bmss.soc >= 10" class="item" id="v10"></span>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "ProgressBattery",
      props: {
        bmss: {
          type: Object,
          required: true,
          default: function () {
            return [{ soc: 0 }];
          },
        },
      },
      mounted() {
        if (this.bmss.soc >= 61) {
          for (let i = 1; i < 11; i++) {
            document.getElementById(`v${i}0`).style.backgroundColor = "#4ee533";
            console.log(this.bmss.soc + "초록" + `v${i}0`);
          }
        } else if (this.bmss.soc >= 21 && this.bmss.soc <= 60) {
          for (let i = 1; i < 7; i++) {
            document.getElementById(`v${i}0`).style.background = "#FFA500";
            console.log(this.bmss.soc + "주황" + `v${i}0`);
          }
        } else if (this.bmss.soc <= 20 && this.bmss.soc >= 0) {
          for (let i = 1; i < 3; i++) {
            document.getElementById(`v${i}0`).style.background = "#FF0000";
            console.log(this.bmss.soc + "빨강" + `v${i}0`);
          }
        }
        console.log(this.bmss.soc);
      },
    };
    </script>

Answer 1

我认为在您的方法中存在的问题是，您使用id html属性作为样式，并且因为会有多个电池，所以id不会是唯一的。

最好使用样式指令，而不是按id更改样式。

我只是解决了这个问题，并在代码中做了一些难处理的事情。

https://codesandbox.io/s/battery-forked-1ze0jx