<template><div><div class="report-list-title"><div v-for="(item,index) in newTeamA":key="'infoA-'+ index"@click="toggle(item)"><div class="report-list">列表展示的內容XXXXX</div><transition name="fade"mode="in-out"><div v-show="item.choose">這里是展開的內容XXXX</div></transition></div></div></template><script> export default {name: 'GameList',data () {return {newTeamA: [{"endGame": 0,"mvp": true,choose:false},{"endGame": 1,"mvp": false,choose:false}]}},methods: {toggle: function (item) {item.choose = !item.choose;this.$forceUpdate()}} }</script><style lang="less" scoped> @media screen and (-webkit-min-device-pixel-ratio: 2) {.border {border-bottom: thin solid #2d344c;border-width: 0 0 1px 0;} }</style>

如果想要實現，點擊當前列展開閉合，點擊下一個上一個閉合效果，需要在加上這段：

toggle: function (item, newTeamA) {newTeamA.forEach((v) => {if (item.playerId === v.playerId) {} else {v.choose = false;}});if (this.types != 'share') {item.choose = !item.choose;this.$forceUpdate()}}

在toggle函數里面在加一個參數。

總結

以上是生活随笔為你收集整理的vue制作展开收起效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。