关于vue.js Class 与 Style 绑定 & 条件渲染的问题

Question

为什么 fontSize 没有生效？

html

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

最终的渲染结果为：

<div style="color: red;"></div>

Answer 1

font-size这个属性值需要单位，所以单纯设为30是不工作的，可以设为30px，代码修改为

data: {
  activeColor: 'red',
  fontSize: '30px'
}

即可。