javascript - 基于数字值的条件 CSS 类

Question

我有以下 HTML:

<td v-bind:class="getClass()" class="metric-cell vs-last-week">
{{ (((metrics.twitter.engagements.thisWeek - metrics.twitter.engagements.lastWeek) / metrics.twitter.engagements.lastWeek)*100).toFixed(1) + "%" }}
</td>

有没有办法获取单元格内的值，以便我可以在 getClass() 中处理它？如果它是正的，将颜色更改为绿色？

我知道我可能会创建一个方法来实际处理数据而不是丑陋的内联表达式，然后使用它在 getClass() 中重新计算并在那里检查正/负，但我想知道这是否可能从 <td> 中获取值然后在不重新计算的情况下进行比较并返回正确的类名。

Answer 1

通常，每当我想保存一个计算值时，我只是创建一个新范围。在 Vue 中执行此操作的方法是一个组件。

Vue.component("metric", {
  props:["metric"],
  template:`
    <td :class="getClass()">{{metric}}</td>
  `,
  methods:{
    getClass(){
      return {
        green: this.metric >= 0,
        red: this.metric < 0
      }
    }
  }
})

然后你可以像这样在你的表中使用它:

<td is="metric" :metric="(((metrics.twitter.engagements.thisWeek - metrics.twitter.engagements.lastWeek) / metrics.twitter.engagements.lastWeek)*100)"></td>