VueJS数据绑定对象样式不起作用

Question

我正在使用v-bind在VueJS样式中玩耍，当我从v-bind内联样式转换为v-bind对象样式时，我注意到了一些特别之处。内联样式效果很好。但是，当我在Vue中创建对象并尝试使用该对象设置样式时，即使其余部分都设置了宽度和高度，也不会设置样式。

我意识到这很可能是语法错误，我尝试在height和width的值周围添加引号。

<span :style="progbar">80%</span>

// styling:

progbar:{
   height: 20,
   width: 800,  
   backgroundColor: 'red',
   color: 'white',
   fontSize: '30px'

   }

我希望看到宽度为800的条，但是条没有显示出来，我也不知道为什么。完整的代码位于：https://jsfiddle.net/totoro183/nho1jv37/51/

Answer 1

使用<div :style="progbar">80%</div>代替span。它与div一起使用，不适用于span，因为span是内联元素。没有宽度或高度。

Answer 2

您需要用''

包围宽度和高度值

progbar:{
   height: '20px',
   width: '800px',
   ...