vue-uniapp 循环列表展开收起

最新推荐文章于 2024-06-20 22:03:11 发布

城永

最新推荐文章于 2024-06-20 22:03:11 发布

阅读量889

点赞数

原文链接：https://blog.csdn.net/weixin_44849587/article/details/119753822

版权

关键词由CSDN通过智能技术生成

.listTitle{width: 7.5rem;height: 1rem;margin: auto;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;}
.listContent{background: #eee;height: 1rem;}

<div id="demo">
        <div v-for="(item,index) in data_list" @click="isShow(index)">
            <div class="listTitle">
                <p>{{item.title}}</p>
                <p>></p>
            </div>
            <div class="listContent" v-if="idx==index">{{item.content}}</div>
        </div>
</div>

new Vue({
            el:"#demo",
            data(){
                return{
                    data_list:[
                        {
                            title:"苹果",
                            content:"这是一个很甜的苹果"
                        },
                        {
                            title:"西瓜",
                            content:"这是一个很甜的西瓜"
                        },
                        {
                            title:"哈密瓜",
                            content:"这是一个很甜的哈密瓜"
                        },
                    ],
                    is_show:false,
                    idx:-1
                }
            },
            methods:{
                isShow(index){
                    console.log(index)
                    // this.idx=index  //这种情况点击后显示内容，再次点击不起作用
                    this.idx=this.idx==index?-1:index  //这种情况点击后显示内容，再次点击隐藏
                }
            },
            created(){
                
            },
            mounted(){

            }
        })