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

我在VueJS中使用v-bind进行样式设置，当我从v-bind内联样式切换到v-bind对象样式时，我注意到了一些特别的东西。内联样式工作正常。但是，当我在Vue中创建一个对象并尝试使用该对象设置样式时，宽度和高度不会设置样式，即使其余部分设置了样式

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

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

// styling:

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

   }

80%
//样式：
程序条：{
身高：20，
宽度：800，
背景颜色：“红色”，
颜色：'白色'，
字体大小：“30px”
}

---

我希望看到一个800宽的酒吧，但它没有出现，我不知道为什么。完整代码位于：

您需要在宽度和高度值周围加上“”

progbar:{
高度：“20px”，
宽度：“800px”，
...

您需要在宽度和高度值周围加上“”

progbar:{
高度：“20px”，
宽度：“800px”，
...

使用

80%

而不是

span

。它与

div

一起工作，不与

span

一起工作，因为

span

是一个内联元素。它没有宽度或高度。

使用

80%

而不是

span

。它与

div

一起工作，不与

span

一起工作，因为

span

是一个内联元素line元素。它没有宽度或高度。

我当时看到这是一个内联与块的问题。我尝试将进度条类添加到“span”中，并意识到这也起了作用。谢谢！正确，span不是块级元素。尝试将display='block'添加到progbar对象中。p，您可以将

display:'block'，

添加到

progbar

对象中，并且将

span

作为块元素。我当时认为这是内联与块的问题。我尝试将进度条类添加到“span”中，并意识到这也起了作用。谢谢！正确，span不是块级别的元素。尝试将display='block'添加到progbar对象是的，您可以将

display:'block'，

添加到

progbar

对象中，并且您有一个<代码>span作为块元素。