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

我用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>

回答:

思想应该是这样的:
控制子元素的显示与隐藏应该是在子元素的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>

回答:

<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(index)">
        <div class="shareAnimate" v-show="shareAnimate==index">
                    <span>+{{item.point}}</span>
        </div>
</div>
……
//函数可以这么写
toArticleDetail(index){
this.shareAnimate=index;
}

不知道是不是你要的!

回答:

给list中的每个元素添加一个默认标志属性 如isAct=false;

<div class="shareAnimate" v-show="item.isAct">
            <span>+{{item.point}}</span>
</div>

toArticleDetail函数这样写:

for(var i=0;i<this.list.length;i++){
    this.list[i].isAct = false
}
item.isAct=true;

这样就可以了

回答:

你这样肯定不行的。
下面例子供参考https://segmentfault.com/a/11…

回答:

<div class=”article-list-item” v-for=”(item,index) in list” @click=”toArticleDetail(index)”>

    <div class="shareAnimate" v-show="shareAnimate">
                <span>+{{item.point}}</span>
    </div>

</div>
data(){
return{
index:-1
}
},
methods:{
toArticleDetail(index){
this.index=index;
}
}

回答:

我最近也遇到了同样的问题。
尝试了各种方案无果,最终的解决方案是在传入数据之前做个处理,为每个元素添加一个单独的属性,来控制他的显示或者隐藏,如下:

//在list中添加"isShow"属性
<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(item)">
        <div class="shareAnimate" v-show="item.isShow">
                    <span v-text="'+'+item.point"></span>
        </div>
</div>

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注