Question

我正在尝试将宽度绑定到宽度等于数据属性的div。 data属性的值从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可能就是为什么它没有改变宽度

Answer 2

您正在联接'%'两次：

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

和

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

只在一个地方做，它会正常工作。

Simplified JSFiddle concatening '%' in style only

v-bind：类数据绑定不在方法中设置值

2 个答案: