[Vuejs]-V-if value condition in table

by

-1👍

✅

This is resolution for your problem, I hope that help you

https://jsfiddle.net/mathmelo/fjs9x7by/3/#

HTML 

<table>
  <tbody>
    ...
    <td :class="changeBackgroundColor(item.ValueOfDay1)" >{{item.ValueOfDay1}}</td>
    ...
    </tr>
  </tbody>

Vue

new Vue({
    el: '#app',
  data: {
    data: [
      {dwg: 0, name: 'test' , ValueOfDay1: 10, ValueOfDay2: 20, ValueOfDay3: 30},
      {dwg: 0, name: 'test2' , ValueOfDay1: 10.2, ValueOfDay2: 20, ValueOfDay3: 30},
      {dwg: 0, name: 'test3' , ValueOfDay1: 10.1, ValueOfDay2: 20, ValueOfDay3: 30}

    ]
  },
  methods: {
    changeBackgroundColor(valueOfDay) {
      //Get the decimal part of the number 
      decimals = valueOfDay - Math.floor(valueOfDay);

      switch(decimals.toFixed(1)){
        case '0.0' : return 'red'
        case '0.1' : return 'blue'
        case '0.2' : return 'green'

      }
    }
  }
});

And CSS

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

-1👍

Adding dynamic styling based on condition as below->
:class=”item.ValueOfDay1 == 10 ? ‘bgRed’ : item.ValueOfDay1 == 10.1 ? ‘bgBlue’ : item.ValueOfDay1 == 10.2 ? ‘bgGreen’ : ””

<tbody>
      <tr v-for="(item,i) in data" :key="i">
      <th scope="row"></th>
      <td>{{item.dwg}}</td>
      <td>{{item.name}}</td>
      <td :class="item.ValueOfDay1 == 10 ? 'bgRed' : item.ValueOfDay1 == 10.1 ? 'bgBlue' : item.ValueOfDay1 == 10.2 ? 'bgGreen' : ''">{{item.ValueOfDay1}}</td>
      <td :class="item.ValueOfDay1 == 10 ? 'bgRed' : item.ValueOfDay1 == 10.1 ? 'bgBlue' : item.ValueOfDay1 == 10.2 ? 'bgGreen' : ''">{{item.ValueOfDay2}}</td>
      <td :class="item.ValueOfDay1 == 10 ? 'bgRed' : item.ValueOfDay1 == 10.1 ? 'bgBlue' : item.ValueOfDay1 == 10.2 ? 'bgGreen' : ''">{{item.ValueOfDay3}}</td>
    </tr>
  </tbody>

CSS

.bgRed{
  background:red;
}
.bgBlue{
  background:blue;
}
.bgGreen{
  background:green;
}

Leave a comment