vue v-for循环列表、vue循环列表、点击显示隐藏、点击展开隐藏

css：

.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;}

html：

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

js：

<script>
        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(){

            }
        })
</script>

效果图：