v-bind：クラスデータバインドでメソッドの値が設定されない

Question

divをデータ属性と等しいdivにバインドしようとしています。データ属性の値が0から100に変化していますが、divの幅は変更されていません。 誰かが私にその理由を教えてもらえますか？

<div class="bar" :style="{ width: percentage + '%' }"></div> 

<script> 
    export default { 
     name: 'app', 
     data() { 
      return { 
       percentage: 0, 
       total: 43, 
       downloaded: 0 
      } 
     }, 
    methods: { 
      loadData() { 
       var _this = this; 
       this.toggleLoading(); 
       var interval = setInterval(function(){ 
        if (_this.downloaded == _this.total) clearInterval(interval); 

        _this.downloaded++; 
        _this.percentage = Math.floor(_this.downloaded/_this.total * 100) + ' %'; 
       }, 
       100); 
      }, 
    } 

Answer 1

を変更しない理由を0として言及率はthatsのかもしれ持っているあなたは二回'%'をconcateningされています

:style="{ width: percentage + '%' }" 

と

_this.percentage = Math.floor(_this.downloaded/_this.total * 100) + ' %' 

だけにしないでください1つの場所で、それは正常に動作します。

Simplified JSFiddle concatening '%' in style only

Answer 2

あなたはその幅