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.