时间戳

首页 > 解决方案 > Vue.js：在方法中的循环内更新 Bottstrap 进度条

javascript - Vue.js：在方法中的循环内更新 Bottstrap 进度条

问题描述

我的问题 ：

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

标签： javascripthtmlvue.jsdata-binding

解决方案

演示：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 帧。不同之处在于更大的循环将使该帧需要更长的时间来渲染。

推荐阅读