javascript - Vue.JS 表格行 CSS 随数据变化

Question

我希望这是一个尚未回答的问题，我已经查看了所有答案，但似乎都没有找到问题的根源，或者，我对 Vue.JS 的掌握不够扎实了解如何将它们应用于我的情况。

我正在使用 Vue.JS 创建一个表格并用来自网络源的数据填充它。该表可以很好地填充，并且运行良好。

但是，我想弄清楚如何根据数据的值使填充有信息的每一行具有特定的颜色。例如，如果数据值介于 0 和 12 之间，我希望该行突出显示绿色。如果介于 12 和 30 之间，则突出显示红色等。

我已经广泛研究了 v-bind，我非常有信心这是实现它的方法。我熟悉 v-bind 的基本工作原理，我可以毫无问题地用它做相当简单的事情。我只是想不通如何将 v-bind 与这些数据结合起来并使其发挥作用。我希望这足够详细。

如果需要更多信息，请询问。

谢谢!

Here is the table in my html. This is just the outline of my vue instance. These are the classes of what the rows could, depending on the data, be colored.

Answer 1

关于 v-binding 你是对的，你想绑定(bind)到一个类，使用数据值来确定类。我得到这个来做你想做的事。

<template>
  <table v-for="(stuff, i) in stuffs" :key="i">
      <tr :class="getClass(`${stuff.a}`)">
        <td>{{stuff.a}}</td>
        <td>{{stuff.b}}</td>
        <td>{{stuff.c}}</td>
      </tr>
    </table>
</template>
<script>
    export default {
        data: () => ({
          stuffs: [
            {a: 17, b: 'blaa', c: 'hmmm'},
            {a: 6, b: 'blah', c: 'hmmm'},
            {a: 112, b: 'blah', c: 'hmmm'},
            {a: 4, b: 'blah', c: 'hmmm'},
            {a: 45, b: 'blah', c: 'hmmm'}
          ], 
          class: ''
        }),
        methods: {
          getClass(a) {
              if (a<10) {
                this.class="first"
                return this.class
              }
              if (a>11 && a< 100) {
                this.class = "second"
                return this.class
              }
              else {
                this.class = "third"
                return this.class
              }
            }
        }
    }
</script>
<style scoped>
    .first{
      background-color: blue
    }
    .second {
       background-color: red
    }
    .third {
       background-color: green
    }
</style>

显然这是一个非常基本的示例，但您应该能够让它执行您想要的操作。