> 效果如圖  > 這里實現的是三組 list 中的 點擊 toggle事件 > html 代碼 ``` <div id="app"> <div v-for="(item, index) in list" :key="index"> <p v-show="index === activeIndex" :key="index">{{item}}--{{index}}</p> <div style="background: cadetblue;width: 100px;height: 100px" @click="toggle(index, 1)">test</div> </div> <div v-for="(item, index) in list2" :key="index"> <p v-show="index === activeIndex2" :key="index">{{item}}--{{index}}</p> <div style="background: cadetblue;width: 100px;height: 100px" @click="toggle(index, 2)">test</div> </div> <div v-for="(item, index) in list3" :key="index"> <p v-show="index === activeIndex3" :key="index">{{item}}--{{index}}</p> <div style="background: cadetblue;width: 100px;height: 100px" @click="toggle(index, 3)">test</div> </div> </div> ``` > js 代碼 ``` var vm = new Vue({ el: '#app', data() { return { list: [ '111', '222', '333', '444', '555' ], list2: [ '111', '222', '333', '444', '555' ], list3: [ '111', '222', '333', '444', '555' ], activeIndex: '', activeIndex2: '', activeIndex3: '' } }, methods: { toggle(index, num) { this.activeIndex = this.activeIndex2 = this.activeIndex3 = '' switch (num) { case 1: this.activeIndex = index; break; case 2: this.activeIndex2 = index; break; case 3: this.activeIndex3 = index break; default: } } }, }) ```