vue点击添加样式双击取消样式
时间: 2023-09-29 13:06:53 浏览: 47
可以使用 v-bind:class 来实现点击添加样式,双击取消样式的功能。
首先,在 data 中定义一个变量,用于保存是否已经添加了样式:
```
data() {
return {
isActive: false
}
}
```
然后,在模板中使用 v-bind:class 来绑定样式:
```
<div
class="box"
v-bind:class="{ active: isActive }"
@click="isActive = !isActive"
@dblclick="isActive = false"
>
点击添加样式,双击取消样式
</div>
```
其中,active 是要添加的样式类名,isActive 是保存是否已经添加样式的变量,@click 监听点击事件,点击时将 isActive 取反,@dblclick 监听双击事件,双击时将 isActive 设置为 false,即取消样式。
完整代码如下:
```
<template>
<div
class="box"
v-bind:class="{ active: isActive }"
@click="isActive = !isActive"
@dblclick="isActive = false"
>
点击添加样式,双击取消样式
</div>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.active {
background-color: red;
}
</style>
```