将动态样式传递给我在VueJS中的元素

我正在试图制作一种进度条来跟踪已完成任务的百分比。我想v-bind：样式并将其传递给{width：dynamicWidth +'％'}以控制这个条的进度。到目前为止，我已经创建了一个计算的变量，将返回完整的我想栏中显示的百分比，我已经建立了我的动感风格在数据对象将动态样式传递给我在VueJS中的元素

export default{ 
    data: function() { 
     return { 
     numQuotes: dataBus.numQuotes, 
     numberA: 30, 
     barWidth: { 
      width: this.barWidthCalculated +'%' 
     } 
     } 
    }, 
    computed: { 
     barWidthCalculated: function(){ 
     return this.numQuotes * 10; 
     } 
    } 
    }

我还添加了一个元素的DOM查看发生了什么事。

<div id="trackerBar"> 
     <div id="trackerBarActual" v-bind:style="barWidth"> 
      <h2>{{numQuotes}}/10</h2> 
      <p>{{barWidthCalculated}}</p> 
     </div> 
    </div>

我的酒吧保持固定在100％，我没有看到DOM上的任何插值。我还在数据部分建立了另一个NUMBER变量，并试图将其传递给我的width属性，但仍然没有变化，并且没有在DOM上进行渲染。但是，如果我通过我的样式对象中的任何其他元素，如

color: 'red'

发生这些更改。此外，如果我通过我的样式直接对象数即ie ...

barWidth: { 
     width: 50 +'%' 
    }

它正确显示在DOM上。

我在想什么/做错了什么？

来源

2017-07-28 DMrFrost

为什么不直接使用：

<div id="trackerBarActual" v-bind:style="barWidthCalculated"> 

    computed: { 
    barWidthCalculated: function(){ 
     return { 
     width: (this.numQuotes * 10) + '%', 
     color: 'red' 
     }; 
    }

来源

2017-07-28 05:10:12 AirNoir

将动态样式传递给我在VueJS中的元素

回答

相关问题