Javascript 使用Vue.js更改CSS类属性

我正在使用Vue.js，我想更改CSS类属性。 使用该类的HTML代码如下所示：

<div class="fillTimerBar"></div>

从那里，我想使用Vue组件中的

computed

属性更改

width

类属性

---

如果有的话，哪种方法是正确的？

您必须使用

v-bind:style

指令

var vm=new Vue({
el:“#示例”，
数据：{
宽度：'200px'
},
计算：{
computedWidth:函数（）{
返回这个.width；
}
},
方法：{
changeWidth:函数（事件）{
这个。宽度='100px'；
}
}
})

#myDiv{
背景色：红色；
高度：200px；
}

改变

要更改类内的属性，可以使用CSS自定义属性：

.fillTimerBar {
    --width: 100%;
    width: var(--width);
    height: 8px;
}

在Vue中，可以将CSS变量绑定到样式：

<div class="fillTimerBar" :style="`--width: ${computedWidth}`"></div>

但是在您的例子中，您更改了直接样式，那么类内的属性呢？如果有类似文本装饰的内容，会发生什么？对于css中的多个变量，您可以使用以下内容：

：style=“`--var-1:${computed1}；--var-2:${computed3}；--var-3:${computed3}；`

<div class="fillTimerBar" :style="`--width: ${computedWidth}`"></div>