代码之家 › 专栏 › 技术社区 › Mz1907

vue.js:更新方法中循环内的bottstrap progressbar

data-binding vue.js html javascript

Mz1907 · 技术社区 · 6 年前

我的问题:

我有一个Vue.js方法指令,它声明一个从1到1.000.000的循环。我想把进度条更新到50%。所以当我==500000时,我希望我的进度条的WITDH CSS规则是50%。

这是ProgressBar的HTML代码

 <div id="app">
 <button v-on:click.stop="executeLoop()">Execute the loop</button>

  <div class="progress">
      <div class="progress-bar progress-bar-striped bg-success" 
           v-bind:style="barWidthCalculated" v-bind:aria-valuenow="barWidthCalculated" 
           aria-valuemin="0" aria-valuemax="100">
      </div>
  </div>
</div>

这是我的vue.js代码

let vm = new Vue({
    el: '#app',
    data(){ return {
        progression : 0,
    }},

    methods: {
        executeLoop: function () {
                for (var i = 0; i < 1000000; ++i) {
                    if (i == 500000) {
                        this.progression = 50;                        
                        //this.$set(this, progression, 30); // This instruction gives me "Reference error: progression is not defined"
                    }
                }
        },
    },

    computed: {
        barWidthCalculated: function () {
            return {
                width: this.progression + '%'
            };
        }
    }
})

1 回复 | 直到 6 年前

Filip Sobol 6 年前

演示: https://jsfiddle.net/eywraw8t/183735/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .loader-wrapper {
            position: relative;
            height: 20px;
            background-color: gray;
            width: 100%;
            text-align: center;
            color: #fff;
        }
        .loader {
            position: absolute;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="loader-wrapper">
            <div class="loader" :style="{ width: widthPercentage }"></div>
            {{ widthPercentage }}
        </div>


        <button @click="start">Start</button>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",

            data: {
                width: 0
            },

            computed: {
                widthPercentage() {
                    return this.width + "%";
                }
            },

            methods: {
                start() {
                    for (let i = 0; i < 1000000; ++i) {
                        if (i === 500000) {
                            this.width = 50;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

请注意,这是非常低效的,因为每次点击都会触发这个巨大的循环。此时,循环10次或1000000次并不重要,因为仍然需要1帧来渲染。不同的是,较大的循环将使该帧的渲染时间更长。