vue实现切换class(与style的绑定)

关注

原创最新推荐文章于 2026-08-15 00:31:44 发布 5.4k 阅读 AI 写同款· GEO 优化 ›

STM32CubeMX+Keil5实战：手把手教你用STM32F103C8T6开发扫地机器人（附完整代码）本文详细介绍了如何使用STM32F103C8T6开发智能扫地机器人，从STM32CubeMX配置到Keil5代码实现的全过程。涵盖硬件选型、时钟树配置、GPIO外设设置、电机驱动、超声波测距及自动避障算法等核心内容，并提供完整代码示例，助力开发者快速掌握智能硬件开发技巧。阅读详情

1、先在data里面添加一个变量：isact，默认可设置为0

data() {
     isact: 0
}

2、在页面中可以这么写：

<li v-for="(item, index) in shopSort" @click="tabsort(index)" :class="{ active: iscur == index }">{{ item }}</li>

3、在methods中添加一个方法：

tabsort(index) {
   this.iscur = index;
}

2、针对一个div（点击切换class）

<template>
    <div>
        <span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span>
    </div>
</template>

<script>
    export default {
        name: 'hello',
        data () {
            return {
                isA: false
            }
        },
        methods:{
            toggle:function () {
                this.isA = !this.isA
            }
        }
    }
</script>

<style scoped>
    /*  todo */
</style>