On the binding of vue.js Class and Style & conditional rendering

Why doesn"t fontSize work?

html

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

the final rendering result is

<div style="color: red;"></div>
Jun.23,2021

The attribute value of

font-size needs units, so simply setting it to 30 does not work. It can be set to 30px, and the code can be changed to

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

is fine.

Menu