仅在 v-for 循环上应用 :style 一次 - vue.js

Question

我正在尝试使用 Vue.js 构建热图表。

我一直在关注为 jquery 制作的这个很棒的教程。

我想避免使用 jquery，并且一切正常，但是我在最后一步遇到了麻烦 $(this).css({backgroundColor:clr});

如何:style为每个单元格只更改一次？现在，一旦它处于循环的最后一个循环，它显然会更改每个单元格的值v-for。

我想创建一个watcher每次更改颜色数据属性时都会看到并运行一个单独的函数，例如changeColour: function(color) {// change css}但我不知道将它应用于哪个单元格。

到目前为止，我有：

一个基本的 html 表：

<tbody v-for="page in json">
  <tr>
    <td style = 'background-color: #e5e5ff'> 
    {{page.page_path}} </td>
    <td :style="{ 'background-color': sessionColor }">
    {{page.sessions}} </td>
    <td :style="{ 'background-color': exitColor }">
    {{page.exit_rate}} </td>
    <td :style="{ 'background-color': bounceClr }">
    {{page.bounce_rate}} </td>
    <td :style="{ 'background-color': timeClr }">
    {{page.avg_time_on_page}} </td>
  </tr>

一个具有 4 个颜色属性的 Vue 实例，以及一个负责生成 RGB 值的方法。

在这里，我有完整的jsfiddle，唯一缺少的是V-结合 风格的 一次每个细胞。我怎么能做到这一点？谢谢！

https://jsfiddle.net/6sLx3su2/

Answer 1

我会做这样的事情。

代替

    this.sessionColor = sessClr;
    this.exitColor = exitClr;
    this.bounceColor = bounceClr;
    this.timeColor = timeClr;,

和

    this.json[i].sessionColor = sessClr;
    this.json[i].exitColor = exitClr;
    this.json[i].bounceColor = bounceClr;
    this.json[i].timeColor = timeClr;

并在 html 中为 json 中的每个条目引用，如下所示：

<td :style="{ 'background-color': page.sessionColor }">

检查这个小提琴

希望能帮助到你。