Question

我有这段代码，目标是设置TD元素的样式：

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

其中color是类似[ [0, 15, 31, 0.4], [0, 20, 31, 0.4], .. ]的rgba颜色数组

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

Answer 1

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

new Vue({
  el: '#app',
  data: {
    colors: [
      [230, 14, 43, 0.4],
      [0, 44, 131, 0.4]
    ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <td v-for="(color, index) in colors" :key="index" :style="{backgroundColor: `rgba(${color.join(',')})` }">
       {{ color }}
      </td>
    </tr>
  </table>
</div>

Answer 2

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

在下面的示例中，您可以使用ES6的array destructuring和template literals来生成所需的RGBA字符串，该示例稍有高级。

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

然后在组件JS逻辑中：

methods: {
    tdCssStyle: function(color) {
        const [r, g, b, a] = color;
        return {
            backgroundColor: `rgba(${r},${g},${b},${a})`
        };
    }
}

请注意：您的v-for绑定中有错字，您错过了in关键字，即应为(color, index) in colors。

概念验证：

new Vue({
  el: '#app',
  data: {
    colors: [
      [0, 15, 31, 0.4],
      [0, 20, 31, 0.4]
    ]
  },
  methods: {
    tdCssStyle: function(color) {
      const [r, g, b, a] = color;
      return {
        backgroundColor: `rgba(${r},${g},${b},${a})`
      };
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <td v-for="(color, index) in colors" :key="index" :style="tdCssStyle(color)">
        {{ color }}
      </td>
    </tr>
  </table>
</div>

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

2 个答案: