码上敲享录 > vue.js常见问题详解 > v-bind:style绑定内联样式

v-bind:style绑定内联样式

上一章章节目录下一章 2020-03-17已有2275人阅读 评论(0)

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


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交