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>

效果圖：