vue点击事件修改多个标签样式
时间: 2023-07-28 07:27:58 浏览: 157
jQuery点击打开多个标签页代码.zip
你可以使用Vue中的绑定class和style来实现修改多个标签样式的效果。具体操作如下:
1. 在Vue组件中定义一个变量,用于控制标签样式的变化。
```
data() {
return {
isActive: false
}
}
```
2. 给需要修改样式的标签添加class或style绑定。
```
<div :class="{active: isActive}" :style="{color: isActive ? 'red' : 'black'}">这是一个标签</div>
```
3. 在点击事件中修改isActive的值,来控制标签样式的变化。
```
<button @click="isActive = !isActive">点击我修改标签样式</button>
```
其中,`:class="{active: isActive}"`表示当isActive为true时,给该标签添加名为active的class;`:style="{color: isActive ? 'red' : 'black'}"`表示当isActive为true时,该标签的字体颜色为红色,否则为黑色。
你可以根据需要修改class和style的属性来实现你所需的样式变化。
阅读全文