如何将变量传递给 VueJs 中的边框样式属性

Question

我有一个组件，它以一种颜色作为道具传递，我希望将其用作表格上的边框颜色。不知道我是怎么做的。尝试了以下可预见的错误，但我不确定如何使其工作：

 <th class="text-left" :style="'border-left: 10px solid colour;'">Statement</th> 

在上面的例子中，'colour' 是传入的 prop 的名称。请问如何动态设置边框颜色？

Answer 1

如果你绑定你的风格，它需要一个对象。

这是一个对象：{}。您从花括号开始，您也可以在文档中看到它https://vuejs.org/v2/guide/class-and-style.html

:style="{ 'border-left': '10px solid ' + colour }"

或文字：

:style="{ 'border-left': `10px solid ${colour}` }" 

您不需要将所有内容都放在 HTML 标记中，您也可以将其放入data：

data() {
   return {
      styling: {
         'border-left:': `10px solid ${this.colour}`
      }
   }
}

:style="styling"