Twitter bootstrap 动态更改VueJS组件中引导进度条的aria valuenow

我正在使用VueJS和引导建立一个网站。我选择使用“普通”引导，而不是VueBotstrap或VueStrap之类的VueJS框架

我正在尝试构建一个包装Boostrap进度条的自定义组件，并希望它具有一个随时间变化的

值
数据属性。使用以下代码，当组件的
值发生变化时，为什么组件不重新招标？难道
v-bind
不应该允许这样吗？这是我的密码：

<template>
  <div>
    <h1>Item</h1>
    <div class="progress" style="height: 50px;">
      <div
        class="progress-bar"
        role="progressbar"
        style="width: 25%;"
        v-bind:aria-valuenow="value"
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      value: 0,
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.value = 25 + Math.random() * 75;
      console.log(this.value);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>


项目
导出默认值{
数据：（）=>{
返回{
值：0，
计时器：空
};
},
安装的（）{
this.timer=setInterval（（）=>{
this.value=25+Math.random（）*75；
console.log（this.value）；
}, 2000);
},
在…之前{
clearInterval（这个计时器）；
this.timer=null；
}
};

我可以在控制台中看到日志，但进度栏中没有任何移动

我的最终目标是为组件设置动画，以便在加载时，值从0逐渐变为给定值。
这是因为
aria valuenow
不控制进度条的可视宽度，而
style=“width:25%”
控制进度条的可视宽度


newvue({
el:“应用程序”，
数据：{
值：0，
计时器：空
},
安装的（）{
this.timer=setInterval（（）=>{
this.value=25+Math.random（）*75；
//console.log（this.value）；
}, 2000);
},
在…之前{
clearInterval（这个计时器）；
this.timer=null；
}
})

项目