Question

我有一个表，我想根据值更改类。

我的第一种方法是使用v-bind:class="{}如果为真，这将改为正确的类。但是这样做我应该为我的表上的每个值创建新的元素，这看起来不是最好的选择。

是否有办法使用条件，例如if {{value}} > 5 class:something

我写了一个小jsfiddle，我现在的工作方式。我们的想法是表中的每个元素都遵循这些规则，而不需要为每个单元格编写if语句：

  if (this.v1 < 4) {
    this.goodBox = true
  } else if (this.v1 < 6) {
    this.goodBox = true
  } else {
    this.badBox = true
  }

Answer 1

我猜你的意图，但是这样的事情。

changeClass(value) {
  return {
    'good_box': value <= 4,
    'medium_box': value > 4 && value <= 6,
    'bad_box': value > 6
  }
}

模板

<table style="width:100%; border:1px solid black">
  <tr>
    <td :class="changeClass(v1)">{{v1}}</td>
    <td :class="changeClass(v2)">{{v2}}</td>
  </tr>
  <tr>
    <td :class="changeClass(v3)">{{v3}}</td>
    <td :class="changeClass(v4)">{{v4}}</td>
  </tr>
</table>

更新了fiddle。

Answer 2

我会使用v-for：

<div id="app">
  <table style="width:100%; border:1px solid black">
      <tr v-for="v in values" v-bind:class="{ good_box:v < 4, medium_box:v < 6, bad_box:v >= 6}">
        <td>{{v}}</td>
      </tr>
  </table>
</div>

更简单的应用程序：

var test = new Vue({
  el: '#app',
  data: { 
    values:[
      3,
      5,
      20,
      15],
  },
});

fiddle

当然，你可以做两个v-for，生成行和列，并修改你的数据以满足你的需要。

你也可以使用条件方法，但它取决于你。

有条件地改变类vue.js

2 个答案: