vue简单手风琴效果制作

<div class="item" v-for="(item,index) in list" :key="index">
    <div class="time">{{item.addtime | timeFilter}}</div>
    <div class="box">
        <h2 v-show="item.user_id == 0">系统消息</h2>
        //sanhang类名为文本只能显示三行，多余内容省略隐藏，当前几查看按钮，去掉该类名
        <div class="text" :class="{sanhang:item.chakan}" >{{item.content}}</div>
        <div class="status">
            <span v-show="item.readstatus">已读</span>
            <span  v-show="!item.readstatus" class="span1">未读</span>
            <p v-show="item.chakan" @click="downShow(index,item.ad_id)">查看全文</p>
            <p v-show="!item.chakan" class="p1" @click="upShow(index)">收起</p>
        </div>
    </div>
</div>

list:[],//数据列表

//查看消息
downShow(index,id){
    this.list[index].chakan = false;//查看按钮切换为收起
    this.list[index].readstatus = 1;//已读
},

//收起消息
upShow(index){
    this.list[index].chakan = true;//收起按钮切换为查看
},

//请求数据
this.axios.post("/api/user/notice").then(res => {
    if(res.status == 1){
        var arr = res.data.list;
        console.log(arr)
        //向数组中添加新属性为chakan，值true
        arr.forEach((item, index) => {
            this.$set(item,'chakan',true);
        });
        this.list = arr;
    }
})