Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[SOLUCIONADO] Cambiar color de resultados con javascript o v-if de vue

Estas en el tema de Cambiar color de resultados con javascript o v-if de vue en el foro de Frameworks JS en Foros del Web. Hola, tengo una aplicacion en vue.js que obtiene los datos de una base de datos, y al obtenerlo en el div, me muestra una comparacion ...
  #1 (permalink)  
Antiguo 28/02/2020, 09:35
 
Fecha de Ingreso: noviembre-2015
Mensajes: 72
Antigüedad: 4 años, 8 meses
Puntos: 2
Pregunta Cambiar color de resultados con javascript o v-if de vue

Hola,

tengo una aplicacion en vue.js que obtiene los datos de una base de datos, y al obtenerlo en el div, me muestra una comparacion de dos numeros, Ej. 176 | 325.
mi pregunta es: como puedo hacer para que cambien de color cuando el primero es menor que el segundo sea rojo y al reves, si el primero es mayor que el segundo sea verde.
Estaba intentando con un v-if de vue, pero no soy experto y no se manejar muy bien el framework.
este es mi codigo:
Código HTML:
<div class="col-md-12" style="position:relative;">
              <p class="forecastone" style="position: relative;">{{ msData.current_month_employees }}/{{ msData.budget }}</p>
            </div>
            </div>
            <div class="row">
            <div class="col-md-12" style="position:relative;">
              <p class="forecastone" style="position: relative;">YOY:{{ msData.current_month_employees }}/{{ msData.last_year_employees }}</p>
            </div>
            </div>
            <div class="row">
            <div class="col-md-6" style="position:relative; ">
              <p class="forecasttwo" style=" position: relative;">MOM: </p>
            </div>
            <div class="col-md-6" style="position:relative; ">
              <p class="forecastthree" style="position: relative;">{{ msData.current_month_employees }}/{{msData.last_month_employees}}</p>
            </div>
            </div> 
mi funcion que llama los datos:
Código:
openAll() {
 
      this.$http
        .get(
          "/disService/sgov/getDynamicToken?appId=com.huawei.bi.lapresident&credential=gm0eLbG%5DvTCnSsInrU)feI_!_dxPIE_V8%5Bt7%5B3qelUrfHT3A%2BTz1527687428243"
        )
        .then(response => {
          var token = response.body.token;
           var parameters={
              serviceCode :'cnbg_get_last_period',// ,
              isUseCache:false,
              pageSize:1000,
              pageIndex:1,
            //  params:parameter
            }
            parameters['X-Huawei-Auth']=token
         //  var url='/disService/data/getDataByServiceCode'//?serviceCode=hc_by_perid&isUseCache=false&pageSize=10000&pageIndex=1'+param+'&X-Huawei-Auth='+token;
                    var url='/disService/data/getDataByServiceCode'//?serviceCode=hc_by_perid&isUseCache=false&pageSize=10000&pageIndex=1'+param+'&X-Huawei-Auth='+token;
                    this.$http.get(url,{params:parameters})
                    .then( responseData=>{
                      var result=responseData.body.result;
                        if(result){
                          if(result.length>0){
                               var period= result[0].period;
                               var  parameter= "{'TRANSFER_DATE':" + period + " }";
                                parameters.serviceCode='cnbg_staff_hc_budget';
                                parameters['params']=parameter;
                                this.$http.get(url,{params:parameters})
                                .then( responseD=>{
                                  var result=responseD.body.result;
                                  result.ms_cn;
                                 //msData.current_month_employees= result.ms_local;
                                 var budgetMS=result[0].ms_total
                                 var budgetWMS=result[0].wms_total;
                                  this.withOutMs.budget=budgetMS.toFixed(2);
                                  this.msData.budget=budgetWMS.toFixed(2);
                                
                                
                                 
                                var periodString=period.toString();
                                var periodLastMonth="";
                                
                                var periodMonth=  periodString.substring(4,6);
                                var periodYear=periodString.substring(0,4);
                               // var periodLastYear=parseInt(periodYear, 10)-1;
                                var lastMont=""
                                if(periodMonth=='01'){
                                  lastMont='12'
                                  var periodY= parseInt(periodYear, 10)-1;
                                   periodLastMonth=periodY+lastMont
                                }else{
                                    var lastMonthNumber=parseInt(periodMonth, 10)-1;                      
                                    var formattedNumber = ("0" + lastMonthNumber).slice(-2);
                                      console.log(formattedNumber);
                                      periodLastMonth=periodYear+formattedNumber;
                                }
                                
                                 console.log(periodLastMonth);
                                parameters.serviceCode='hc_by_perid';
                                var  parameterLastMonth= "{'period':" + periodString + " }";
                                parameters['params']=parameterLastMonth;
                                this.$http.get(url,{params:parameters})
                                .then( responseLastMonth=>{
                                  var resultLastMonth=responseLastMonth.body.result;
                                    if(resultLastMonth){
                                      if(resultLastMonth.length>0){
                                        for(var k=0;k<resultLastMonth.length;k++){
                                          if(resultLastMonth[k].type_managment==1){
                                               this.msData.last_month_employees  =resultLastMonth[k].last_month_employees,
                                               this.msData.current_month_employees= resultLastMonth[k].current_month_employees;
                                               this.msData.last_year_employees=resultLastMonth[k].last_year_employee;
      
                                          }
                                          else{
                                               this.withOutMs.last_month_employees= resultLastMonth[k].last_month_employees
                                              this.withOutMs.current_month_employees= resultLastMonth[k].current_month_employees;
                                              this.withOutMs.last_year_employees=resultLastMonth[k].last_year_employee;
                                          } 
                                        }
                              this.msData.current_month_employees=this.msData.current_month_employees+this.withOutMs.current_month_employees;
                            this.msData.last_month_employees  =this.msData.last_month_employees + this.withOutMs.last_month_employees;
                            this.msData.last_year_employees=this.msData.last_year_employees+this.withOutMs.last_year_employees;
                                         var valueData= (this.msData.current_month_employees/budgetMS).toFixed(2);
                                       var valueData2=(this.withOutMs.current_month_employees/budgetWMS).toFixed(2);
                            
                                 this.optionsData.series[0].data = [
                                   { value: valueData, name: "完成率", color: "#3fb1e3" }
                                    ];
                                 this.optionsData2.series[0].data = [
                                   { value: valueData2, name: "完成率", color: "#3fb1e3" }
                                    ];
                                      }
                                    }
                                
                                })
                  
                            });
                          }
                      }
                });              
          });

    },
Lo unico que necesito es saber como cambiar los resultados de color con javascript o con v-if de vue, no se si me explique correctamente.
Agradezco su apoyo.
__________________
paco alonso
  #2 (permalink)  
Antiguo 28/02/2020, 11:43
 
Fecha de Ingreso: noviembre-2015
Mensajes: 72
Antigüedad: 4 años, 8 meses
Puntos: 2
Respuesta: Cambiar color de resultados con javascript o v-if de vue

Bueno, encontre la solucion, ahi les va por si a alguien le sirve:

Código HTML:
 <p class="forecastone" style="position: relative; " v-bind:style="msData.current_month_employees > msData.budget ? 'color: red':''">{{ msData.current_month_employees }}</p> 
              </div>
              <div class="col-md-2" style="padding: 0px;">
                <p class="forecastone" >/</p>
              </div>
              <div class="col-md-2" style="padding: 0px;">
              <p class="forecastone" style="position: relative;" >{{ msData.budget }}</p>
            </div> 
se utiliza el v-bind:style y se condiciona ahi mismo para que si mi primer item es mayor que el segundo lo coloree de rojo, es decir; v-bind:style="msData.current_month_employees > msData.budget ? 'color: red':''" o al reves, si el otro es mayor lo colorea de azul.

Saludos.
__________________
paco alonso



La zona horaria es GMT -6. Ahora son las 01:20.