单独操作 v-for 的列表项

文章目录

1.根据列表元素索引来控制

<template v-for="(item, index) in items">
    <div  @click="isShow(index)">
        <div v-show="activeIndex === index"></div>
    </div>
</template>

export default {
    data: function() {
        return {
            activeIndex: -1 // 初始化索引
        };
    },
    methods: {
        isShowInfo(index){
            this.activeIndex = index
        }
    }
}

2.将列表每一项创建为单独的一个组件，然后每个组件都有自己独立的标识

<!--父组件-->
<template v-for="(item, index) in items">
    <child></child>
</template>

<!--子组件-->
<template v-for="(item, index) in items">
    <div  @click="isShow">
        <div v-show="active"></div>
    </div>
</template>

export default{
    data() {
        return {
            isActive: false
        }
    },
    methods: {
        isShow() {
            this.isActive = !this.isActive;
        }
    }
}

学习笔记，根据自己理解简单整理的，不对的地方望指正，非常感谢。