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

【问题标题】：VueJS data-bind object styling not workingVueJS数据绑定对象样式不起作用
【发布时间】：2019-09-25 14:46:03
【问题描述】：

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

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

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

// styling:

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

   }

我希望看到一个 800 宽的条形图，但它没有显示出来，我不知道为什么。完整代码在：https://jsfiddle.net/totoro183/nho1jv37/51/

【问题讨论】：

标签： javascript vue.js data-binding styling javascript-databinding

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

你需要用''包围宽度和高度值

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

【讨论】：