兄弟元素之间动态切换class样式

最新推荐文章于 2023-05-20 11:28:27 发布

小米李

最新推荐文章于 2023-05-20 11:28:27 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue active switch :class 文章标签： vue 非循环动态切换循环

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/85340999

vue 同时被 3 个专栏收录

42 篇文章

订阅专栏

:class

3 篇文章

订阅专栏

active

1 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何实现动态切换class样式，通过非循环和循环元素两种方式展示了状态选择器的功能。利用v-for循环结合@click事件，实现状态切换并更新显示状态，同时动态更新元素的class属性。

之前记录了一个v-for循环的动态切换class，现在记录一个非循环的

一、（非循环）html代码

其中shows四在data中定义的一个初始值，我所定义的-1是，初始状态谁都不选中，如果想初始状态是选中的就直接shows=1/shows=2就可以了

（二、循环元素）

效果如图数值是动态复制的

html:

<template v-for="tab in tabs">
    <el-col :span="3" :key="tab.state" :class="{active: statusShow == tab.state}">
        <div class="status" :class="{active: statusShow == tab.state}"                 
             @click="chooseStatus(tab.state)"> {{tab.name}} ({{tab.count}})
         </div>
     </el-col>
</template>

script

<script> 
 const tabs = [
        { name: '全部', count: 0, state: ''},//全部        
        { name: '待支付', count: 0, state: 2},//待支付
        { name: '已完成', count: 0, state: 1},//完成
        { name: '放弃支付', count: 0, state: 3},//放弃支付
     ];
export default {
   
    data(){
        return{
            statusShow:'',
            tabs,
        }
    },
    mounted(){
        this.testCount()
    },
    methods:{
        /**
         * 切换选中状态获取对应列表
         */
        chooseStatus(state) {
            console.log(state);
            switch (state) {
                case '':
                    this.statusShow = '';// 全部
                    break;
                case 2:
                    this.statusShow = 2;// 待支付
                    break;
                case 1:
                    this.statusShow = 1;// 已完成
                    break;
                case 3:
                    this.statusShow = 3;// 已取消
                    break;
            }
            console.log(this.statusShow);
        },
        testCount(){//这里可以在接口中那数据  动态复制count，这里我是自己定义的值
            this.tabs.map(tab => {
                // console.log(tab);
                switch (tab.state) {
                    case '':
                        tab.count = 100;// 全部
                        break;
                    case 2:
                        tab.count =10;// 待支付
                        break;
                    case 1:
                        tab.count = 60;// 已完成
                        break;
                    case 3:
                        tab.count = 30;// 放弃支付
                        break;
                }
            });
        }
    }
   
}
</script>

<style lang="scss" scope>
 .status {
    text-align: center;
    border: 1px solid #dcdfe6;
    margin-right: 10px;
    cursor: pointer;
    &:hover {
        color: #fff;
        background-color:green;;
    }
    &.active {
        background-color: #e75213;
        color: #fff;
        border: 1px solid currentColor;
    }
}
</style>