Javascript 有没有一种方法可以使用rgba颜色[0,15,31,0.4]在vue js中设置TD元素的样式

我有以下代码，目标是设计TD元素的样式：

  <table >
      <tr>
        <td
          v-for="(color, index) in colors"
          :key="index"
          :style="{backgroundColor: color}"
        >
        </td>
      </tr>
    </table>

其中，

color

是一个rgba颜色数组，类似于

[[0,15,31,0.4]，[0,20,31,0.4]，…]

---

代码不起作用。仅当我将“颜色”数组的类型更改为十六进制时，它才起作用。

您需要告诉浏览器这四个数字是一个

rgba

值：

newvue({
el:“#应用程序”，
数据：{
颜色：[
[230, 14, 43, 0.4],
[0, 44, 131, 0.4]
]
},
});

{{color}}
您需要告诉浏览器这四个数字是一个
rgba
值：


newvue({
el:“#应用程序”，
数据：{
颜色：[
[230, 14, 43, 0.4],
[0, 44, 131, 0.4]
]
},
});

{{color}}
使用返回RGBA字符串的方法，然后将该方法绑定到
style
属性

在下面的示例（稍微高级）中，使用ES6和生成所需的RGBA字符串：

<table>
  <tr>
    <td
      v-for="(color, index) in colors"
      :key="index"
      :style="tdCssStyle(color)"
    >
    </td>
  </tr>
</table>

注意：您的
v-for
绑定中有一个打字错误，您缺少
中的
关键字，即它应该是
（颜色、索引）中的颜色

概念证明：


newvue({
el:“#应用程序”，
数据：{
颜色：[
[0, 15, 31, 0.4],
[0, 20, 31, 0.4]
]
},
方法：{
tdCssStyle:函数（颜色）{
常数[r，g，b，a]=颜色；
返回{
背景色：`rgba（${r}，${g}，${b}，${a}）`
};
}
}
});

{{color}}
使用返回RGBA字符串的方法，然后将该方法绑定到
style
属性

在下面的示例（稍微高级）中，使用ES6和生成所需的RGBA字符串：

<table>
  <tr>
    <td
      v-for="(color, index) in colors"
      :key="index"
      :style="tdCssStyle(color)"
    >
    </td>
  </tr>
</table>

注意：您的
v-for
绑定中有一个打字错误，您缺少
中的
关键字，即它应该是
（颜色、索引）中的颜色

概念证明：


newvue({
el:“#应用程序”，
数据：{
颜色：[
[0, 15, 31, 0.4],
[0, 20, 31, 0.4]
]
},
方法：{
tdCssStyle:函数（颜色）{
常数[r，g，b，a]=颜色；
返回{
背景色：`rgba（${r}，${g}，${b}，${a}）`
};
}
}
});

{{color}}
模板文本在这里有用吗？i、 e.
：style=“{backgroundColor:`rgba（${color[0]}，$color[1]，$color[2]，$color[3]）`}”
模板文字在这里有帮助吗？i、 e.
：style=“{backgroundColor:`rgba（${color[0]}，$color[1]，$color[2]，$color[3]）`}”