Vuejs2 使用VueJs的浏览器中不显示引导进度条

我使用的是Vue2（网页包很简单），我想在组件中添加一个引导进度条，它显示在组件中，但不显示视觉进度（aria valuenow）

我放置了所有可能的脚本： -->引导css、jquery、popper和引导js

我错过什么了吗

这是我的index.html文件-->

Vue组件

这里是我的Counter.vue组件文件-->

添加引号
50%
导出默认值{
}
h4{
文本对齐：左对齐；
}

我希望在我的浏览器中呈现一个进度条，进度已经达到50%。但这只是0%。知道原因吗？

更改此代码：-

<div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100"
            >
            50%
        </div>

50%

作为

50%

更改此代码：-

<div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="0"
            aria-valuemax="100"
            >
            50%
        </div>

50%

作为

50%

谢谢您的回答！这读起来有点违反直觉。你还可以解释一下为什么这样做吗？谢谢你的回答！这读起来有点违反直觉。你还可以解释一下为什么这样做吗？

<div 
            class="progress-bar progress-bar-striped progress-bar-animated bg-info"
            role="progressbar"
            style="width: 50%"
            aria-valuenow="50"
            aria-valuemin="50"
            aria-valuemax="100"
            >
            50%
        </div>