如何将计算属性作为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'完成了这个伎俩。谢谢Roy J！