Vue点击切换class
时间: 2023-07-20 08:16:33 浏览: 69
你可以使用Vue的指令`v-bind:class`来实现点击切换class。具体操作如下:
1. 定义一个变量`isActive`,用于保存当前是否激活。
2. 在元素上使用`v-bind:class`指令,将需要切换的class与`isActive`变量绑定。
```html
<div v-bind:class="{ active: isActive }">点击切换class</div>
```
3. 在元素上使用`@click`指令,绑定一个方法`toggleActive`,用于切换`isActive`变量的值。
```html
<div v-bind:class="{ active: isActive }" @click="toggleActive">点击切换class</div>
```
4. 在Vue实例中定义`isActive`变量和`toggleActive`方法。
```javascript
new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
toggleActive: function() {
this.isActive = !this.isActive;
}
}
})
```
完整代码如下:
```html
<div id="app">
<div v-bind:class="{ active: isActive }" @click="toggleActive">点击切换class</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
toggleActive: function() {
this.isActive = !this.isActive;
}
}
})
</script>
<style>
.active {
color: red;
}
</style>
```