v-bind：類數據綁定不會在方法中設置值

Question

我試圖將寬度綁定到寬度等於數據屬性的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

您concatening '%'兩次：

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

和

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

只能做它在一個地方，它會正常工作。

Simplified JSFiddle concatening '%' in style only

Answer 2

你提到的百分比爲0可能這就是爲什麼它不改變寬度