Vue.js 表中的V-if值条件

我有一张带有tbody和Vuejs的桌子：

 <tbody>
      <tr v-for="(item,i) in data" :key="i">
          <th scope="row"></th>
          <td>{{item.dwg}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ValueOfDay1}}</td>
          <td>{{item.ValueOfDay2}}</td>
          <td>{{item.ValueOfDay3}}</td>
      </tr>
  </tbody>

我想使用v-if更改元素的样式：

---

如何执行此操作？

根据以下条件添加动态样式-> ：class=item.ValueOfDay1==10？'bgRed'：item.ValueOfDay1==10.1？“bgBlue'：item.ValueOfDay1==10.2？“绿色“：

<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>

---

这是解决你问题的方法，希望能对你有所帮助

HTML

和CSS

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

---

如果我有多个值，不仅仅是10；例如：如果ValueOfday==xx->背景色->红色，如果ValueOfday==xx.01->背景色->蓝色，如果ValueOfday==xx.02->背景色->绿色…代码如何>这就是三元条件检查的内容：类=项。ValueOfDay1==10？'bgRed'：item.ValueOfDay1==10.1？“bgBlue'：item.ValueOfDay1==10.2？“bgGreen'：。上面的将检查值是否为10/10.1/10.2，并相应地设置该类。我可以检查：item.ValueOfDay1 Math.rounditem.ValueOfDay1,0，if=0->红色，if=0.1->蓝色，if=0.2->绿色吗？是的，您可以使用上面的舍入函数。

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

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

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'

      }
    }
  }
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}