v-bind:style绑定内联样式

v-bind:style绑定内联样式

CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 ('kebab-case'，记得用引号括起来) 来命名：

正确写法：

例子1:

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

<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

data: {

 activeColor: 'red',

 fontSize: 30

}

例子2:

<input class="input_select_com" type="text"    :style="{'background-color':item.readonly==1?'red':'blue'}" />

<input class="input_select_com" type="text"    :style="{backgroundColor:item.readonly==1?'red':'blue'}"  />

错误写法：

<div v-bind:style="{ color: activeColor, font-size: fontSize + 'px' }"></div>

错误原因：font-size需要引号括起来，或者驼峰式写法fontSize

顶

0