vue中使用双循环v-for及点击切换active,默认使第n个添加active

最新推荐文章于 2023-12-22 11:22:05 发布

脑瓜不疼

最新推荐文章于 2023-12-22 11:22:05 发布

阅读量4.4k

点赞数 2

分类专栏：大前端文章标签： v-for

本文链接：https://blog.csdn.net/super__code/article/details/88416941

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

//  html	代码

// 第一层循环 
<dl class="choose-dl" v-for="(value,preindex) in selectArr">
   <dt class="choose-dt">{{ value.name }}</dt>
     <dd class="choose-dd">
         <!--第二层循环    @click="selectActive 为点击切换active   :class="{ selectActive:index == selectArr[preindex].showItem }" 动态添加class  -->
         <a href="javascript:void (0)" class="choose-item" @click="selectActive(preindex,index)" :class="{ selectActive:index == selectArr[preindex].showItem }"  v-for="(item,index) in value.arrList">
             {{ item.name }}
         </a>
     </dd>
 </dl>
 
//  	javascript代码

export default {
        name: 'testItem',
        data(){
            return{
                selectArr:[
                    {
                        showItem: 0,
                        name: '融资方式',
                        arrList: [
                            { name: '股权' },
                            { name: '债权' }
                        ]
                    },
                    {
                        showItem: 0,
                        name: '所属行业',
                        arrList: [
                            { name: '金融' },
                            { name: '互联网' },
                            { name: '汽车' },
                            { name: '美容' }
                        ]
                    }
                ]
            }
        },
        methods: {
            selectActive(preindex,index){
                // console.log(preindex);
                // console.log(index);
                this.selectArr[preindex].showItem = index
            }
        }
    }

// css代码
<style>
 .choose-dl {
        position: relative;
        margin-bottom: 10px;
        min-height: 26px;
    }

    .choose-dt {
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 700;
        font-size: 14px;
    }

    .choose-dd {
        padding-left: 80px;
    }

    .choose-item {
        /*font-weight: 700;*/
        color: #444;
        margin-right: 20px;
        margin-bottom: 5px;
        display: inline-block;
        font-size: 13px;
    }
    .selectActive{
        font-weight: 700;
        color: #477fd2;
    }

</style>