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

Question

我正在使用 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/

标签： javascriptvue.jsdata-bindingstylingjavascript-databinding

Answer 1

使用<div :style="progbar">80%</div>而不是span. 它可以使用div，也可以不使用，span因为span它是一个内联元素。它没有宽度或高度。