Vue.js：在方法中的循環內更新Bottstrap progressBar

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 個解決方案

解決方案1
0 2018-07-18 21:08:51

Vue.js：在方法中的循環內更新Bottstrap progressBar

問題描述

1 個解決方案

解決方案1 0 2018-07-18 21:08:51

解決方案1
0 2018-07-18 21:08:51