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

Question

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

我一直在关注 this 为 jquery 制作的精彩教程。

我想避免 jquery，一切正常，但是我在最后一步遇到了问题 $(this).css({backgroundColor:clr});

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

我考虑过创建一个 watcher 来查看每次颜色数据属性更改并运行一个单独的函数，如 changeColour: function(color) {// change css} 但我不知道哪个单元格应用它。

到目前为止我有：

基础htmltable:

<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-binding style once 每个单元格。我该怎么做？谢谢！

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 }">

检查这个fiddle

希望对您有所帮助。

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

Apply :style on v-for loop only once - vue.js

vue.js

vue-component

vuejs2