javascript - 如何将计算属性作为样式属性值传递给 Vue.js 中的组件？

Question

我的组件模板包含这个 html 元素:

.grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }")

我想使用计算属性设置它的宽度值:

computed: {
  columnWidth () {
    return ((this.maxWidth - ( this.marginWidth * 2)) - ((this.columnsCount - 1) * this.gutterWidth)) / this.columnsCount;
  }
}

我怎样才能以正确的方式实现这一点？

问题明显在:style="{ width: columnWidth部分因为当我设置此 width:'20px' 时，一切都完美无缺。

Answer 1

我必须在内联样式中向 columnWidth 值附加一个单位。

width: columnWidth + 'px' 成功了。