vue 中v-for循环出的list下的item 如何操作使被点击的元素显示或隐藏

Question

我用v-for循环出来的列表，我点击哪个就让哪个shareAnimate显示出来，我操作shareAnimate会全部显示,我该怎么做只显示那个点击的item<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(item)">        <div class="shareAnimate" v-show="shareAnimate">                    <span>+{{item.point}}</span>        </div></div>

Answer 1

思想应该是这样的：

控制子元素的显示与隐藏应该是在子元素的index标识上进行操作，用点击的那个索引与子元素绑定的index进行对比，来判断元素的显示与隐藏

<template>

    <div class="test-wrapper">

        <div class="article-list-item" v-for="(item,index) in list" :key="index"

        @click="toArticleDetail(index)">

            <div class="shareAnimate" v-show="activeIndex===index">

                <span>+{{item.point}}</span>

            </div>

        </div>

    </div>

</template>

<script>

export default {

    name: "test",

    data() {

        return {

            activeIndex: -1 // 初始化点击的索引值

        };

    },

    methods: {

        toArticleDetail(index) {

            this.activeIndex = index;

        }

    }

}

</script>