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

时间:2017-07-28 04:39:56

标签: javascript css vue.js

我正在尝试制作一种进度条来跟踪已完成任务的百分比。我想要v-bind:styles并传递它{width:dynamicWidth +'%'}以控制此栏的进度。到目前为止,我已经创建了一个计算变量,它将返回我想要显示的完整百分比,并且我已经在数据对象中设置了我的动态样式

  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'

发生了这些变化。此外,如果我直接传递我的样式对象数字...

  barWidth: {
        width: 50 +'%'
  }

它在DOM上正确显示。

我错过了什么/做错了什么?

1 个答案:

答案 0 :(得分:6)

为什么不直接使用:

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

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