vue 用document写一个按钮点击前是一个样式点击后是另外一个样式
时间: 2024-02-19 21:02:29 浏览: 30
您可以使用Vue中的`v-bind:class`指令来实现这个功能。具体来说,您可以在按钮上使用`v-bind:class`,根据按钮的`isActive`状态来动态地切换两种不同的样式。
下面是一个示例代码,实现了点击按钮前后样式的切换:
```html
<template>
<button
v-bind:class="{ active: isActive }"
@click="toggleActive"
>
Click me
</button>
</template>
<script>
export default {
data() {
return {
isActive: false
}
},
methods: {
toggleActive() {
this.isActive = !this.isActive
}
}
}
</script>
<style>
button {
padding: 10px 20px;
border: none;
color: #fff;
background-color: #4CAF50;
}
button.active {
background-color: #008CBA;
}
</style>
```
在上面的代码中,`isActive`是一个布尔类型的数据,表示按钮是否处于激活状态。当按钮被点击时,通过`toggleActive`方法来切换`isActive`的值。同时,使用`v-bind:class`指令来动态地绑定`active`类,使得按钮在`isActive`为`true`时具有不同的样式。最后,在样式中定义`.active`类来设置激活状态下的样式。