Question

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

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

我想避免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-binding 样式一次。我怎么能这样做？谢谢！

this

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

1 个答案: