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

物以稀为贵yeah

于 2017-06-15 15:20:29 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue class

本文链接：https://blog.csdn.net/github_38771368/article/details/73289750

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 Vue.js 实现元素的点击切换效果，包括如何通过数据绑定实现列表项的选中状态切换及如何针对单个元素实现背景颜色的切换。此示例适用于前端开发人员学习 Vue 的数据绑定及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>