Question

我的问题：

我有一个Vue.js方法指令，该指令声明了从1到1.000.000的循环。我想将进度条更新为50％。因此，当我== 500000时，我希望我的progressBar的规则为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 + '%'
            };
        }
    }
})

Answer 1

演示：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帧。区别在于更大的循环将使此帧需要更长的渲染时间。

Vue.js：在方法中的循环内更新Bottstrap progressBar

1 个答案: