vue元素里面的 js对象中,:style后面里属性名不支持这种带-的写法(background-color)
首先要知道,在这个:style里面,虽然可以用 {属性: '属性值' , 属性: '属性值'} 这种方方式来写很多属性,但也仅限于width这种普通属性,像background-color这种带-的特殊标签是不支持直接写的;
<div class="box" :style="{ width:'400px',height: '400px', background-color:'green' }">
<h1>计划安排<h1>
</div>
而如果非要写的话,有两种方法:
1、可以将属性名用单引号' '引起来,如
<div class="box" :style="{ width:'400px',height: '400px', ' background-color' :'green' }">
<h1>计划安排<h1>
</div>
2、是直接用属性名的驼峰命名
<div class="box" :style="{ width:'400px',height: '400px', backgroundColor:'green' }">
<h1>计划安排<h1>
</div>