<template>
//遍歷實現 v-for最好加個key
<div>
        <ul>
            <li v-for="(item,index) in list">
                <p @click="changeContent(index)">{{item.title}}</p>
                    <div class="box" v-show="item.showContent"></div>
             </li>
 

         </ul>
 </div>
 </template>

//在點選時，通過showContent的true或false控制摺疊面板的顯示和隱藏
<script>
data(){
    return{
        list:[{title:我是段落部分的內容，showContent：false},
        {title:我是段落部分的內容，showContent：false}]
    }
},
methods:{
    changeContent(index){                       //通過index拿到當前值
 

        this.list[index].showContent=!this.list[index].showContent;
    }
}
</script>```

//style部分與上面摺疊面板無關。

&:hover {
transform: skewX(10deg) rotateX(12deg); //向前向上
transition: .3s; //過渡時間
transform: scale(1.01); //縮放
}