Стилизация объекта привязки данных VueJS не работает

Question

Я играю в стиле VueJS с помощью v-bind, я заметил кое-что особенное, когда я переключаюсь со встроенного стиля 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/

Answer 1

Используйте <div :style="progbar">80%</div> вместо span.Он работает с div, а не с span, потому что span является встроенным элементом.Он не имеет ширины или высоты.

Answer 2

Вам необходимо окружить значения ширины и высоты с помощью ''

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