基于数字值的条件 CSS 类答案

【问题标题】：Conditional CSS Class Based on Value of Number基于数字值的条件 CSS 类
【发布时间】：2017-07-16 04:01:41
【问题描述】：

我有以下 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> 中获取值，然后在不重新计算的情况下进行比较并返回正确的类名。

【问题讨论】：

标签： javascript css vue.js vuejs2

【解决方案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>

【讨论】：

这正在填充数据，但未填充 CSS 类。
现在工作 :) 显然无法对附加了% 的字符串进行数值比较。

【解决方案2】：

如果您将大部分复杂计算从模板中移出并移到计算属性中，可能会更容易阅读，如下所示：

<td :class="cssClass" class="metric-cell vs-last-week">
  {{ (vsLastWeek * 100).toFixed(1) + '%' }}
</td>

computed: {
  vsLastWeek() {
    const thisWeek = this.metrics.twitter.engagements.thisWeek;
    const lastWeek = this.metrics.twitter.engagements.lastWeek;
    return (thisWeek - lastWeek) / lastWeek;
  },

  cssClass() {
    if (this.vsLastWeek > 0.9) {
      return 'some-class';
    }
  },
}

【讨论】：

在您的示例中，this.vsLastWeek 是在哪里定义的？ this 的上下文是什么？
this 指的是组件实例，您可以从中访问该组件的数据、道具、计算属性和方法。 vsLastWeek 被定义为一个计算属性，可以像this.vsLastWeek 一样访问它。它被定义为一个函数，但您可以将其作为this 的属性访问（将其视为“只读”数据属性）。