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>
Logo

前往低代码交流专区

更多推荐