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>&nbsp; &nbsp; <div class="test-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="article-list-item" v-for="(item,index) in list" :key="index"&nbsp; &nbsp; &nbsp; &nbsp; @click="toArticleDetail(index)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="shareAnimate" v-show="activeIndex===index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>+{{item.point}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></template><script>export default {&nbsp; &nbsp; name: "test",&nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeIndex: -1 // 初始化点击的索引值&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; toArticleDetail(index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.activeIndex = index;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}</script>