利用JS判断前端数据的大小进行变色显示

最新推荐文章于 2024-07-12 16:55:56 发布

养只月亮412

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量149

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/TC0221/article/details/139134720

版权

在实际开发过程中，我们经常遇到客户有这样的需求：实际值比计划值多/少我要能直观的看到对比！

我主要是通过js写一个方法来比较两个值的大小，因为我后台传过来是String类型的，所以我用parseInt处理一下再进行比较！

 <el-col :span="6">
            <div class="grid-content bg-purple" style="padding-top: 8px;">
              <span class="item" >Target：</span><span  class="contrastDates" v-model="this.energyTarget" id="energyTarget1" :visible.sync="addDialogVisible" contenteditable="false"
            >{{ this.energyTarget }}</span><span class="item">kwh/ton</span>
              <br>
              <span class="item">Actual：</span><span  class="dates" v-model="energyActual" id="energyActual" contenteditable="true"
            >{{ this.energyActual }}</span><span class="item">kwh/ton</span>
              <br>
              <span class="item">Utility</span>
            </div>
          </el-col>

data里的数据：

data() {
    return {
      energyActual:"",
      energyTarget:"",
          /**
       * 查询KPI中Target数据，往后台传参数的包,后台拿到两个参数直接数据库查看再把数据返回就可以！
       */
      energyTargetValuePackage: {
        areaName:"XXX",
        kpiName:"Energy",
      },
}}

根据数值改变颜色的方法

   //根据数值改变字体颜色
    changeColor(){
      // energy 实际>计划，爆红色
      if(parseInt(this.energyActual) > parseInt(this.energyTarget)){
        document.getElementById("energyActual").style.color = "#FF9999"
      }else {
        document.getElementById("energyActual").style.color = "#42b983"
      }; 
    },

调用方法，必须用setTimeout才可以显示颜色！这一点特别注意！

mounted: function () {
    setTimeout(() => {
      this.changeColor();
    }, 1000)
  },

从后台获取数据的方法第一个getTargetValueByLine是我的方法名，第二个getTargetValueByLine是我的ajax函数名：

getTargetValueByLine() {
      getTargetValueByLine(this.energyTargetValuePackage)
        .then((res) => {
          this.change = res.data.ltc.join(",");
          this.energyTarget = parseInt(this.change);
        });}