基于数字

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>

Answer 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';
    }
  },
}