Javascript 通过按钮运行计算函数，通过v-bind指令更改CSS类

我正在尝试运行一个函数，该函数使用

vuejs

当我第一次测试这个函数时，我没有使用

：style=“width”

，而是在

上使用

：style=“lifeBar”

，每次运行代码时，条的宽度都会随机改变。换句话说，该功能运行良好

这是我的密码：

HTML

我想弄清楚的是，每次按下

按钮时，如何触发此函数来修改
宽度

提前感谢大家
 最好的方法是在单击时调用一个方法，该方法更新一个数据值，然后您的计算人员使用该数据值返回CSS。看起来是这样的：


[...]
随机测试

newvue({
el:“应用程序”，
数据：{
宽度：100
},
方法：{
setWidth（）{
this.width=Math.floor（Math.random（）*100）；
}
},
计算：{
救生艇（）{
返回{
宽度：`${this.width}%`；
}
}
}
})
谢谢@Daniel Samuels！这很有启发性
<div id="app">
  <div :style="width" 
  class="healthbar text-center" 
  style="background-color: green; 
  margin: 0; color: white; width: 100%">
  </div>
//I just could not figure out what to do below to make the function run on the div above
<button @click="lifeBar">testing random</button>
</div>

new Vue({
el: "#app",
data: {
     width: 100
},
computed: {
     lifeBar: function() {
     var rand = Math.floor(Math.random()*100)
     return {width: rand + '%'}
     }
}
})