vue 中修改指定的class的样式
时间: 2024-03-06 17:49:24 浏览: 15
在 Vue 中修改指定的 class 的样式,可以使用以下几种方式:
1. 使用计算属性绑定 class,并在样式中使用 class 选择器
```
<template>
<div :class="{'my-class': shouldAddClass}">
...
</div>
</template>
<script>
export default {
data() {
return {
shouldAddClass: true
}
}
}
</script>
<style>
.my-class {
color: red;
}
</style>
```
2. 使用 ref 获取元素,并在样式中使用 ref 选择器
```
<template>
<div ref="myDiv">
...
</div>
</template>
<script>
export default {
mounted() {
this.$refs.myDiv.classList.add('my-class');
}
}
</script>
<style>
.my-class {
color: red;
}
</style>
```
3. 使用 scoped 样式,选择指定的 class,并覆盖样式
```
<template>
<div class="my-class">
...
</div>
</template>
<script>
export default {
...
}
</script>
<style scoped>
.my-class {
color: red;
}
</style>
```