vue v-for 列表單獨顯示與隱藏
阿新 • • 發佈：2021-11-25
大致思路
arr是資料列表的陣列，showArr是需要顯示資料的陣列
需要展示的資料用v-if='showArr.indexOf(index)!==-1'來控制，有就顯示，沒有就隱藏
showArr預設為空，點選展示/隱藏，判斷showArr中是否有此資料，有就刪除(隱藏功能)，沒有就新增(顯示功能)
<html> <head> <title>VueJs 線上編輯器</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"> </script> </head> <body> <div id = "intro" style = "text-align:center;"> <div v-for='(item,index) in arr'> <button class='d1' @click='show(index)'> {{showArr.indexOf(index)===-1?'展開':'隱藏'}} </button> <div class='d2' v-show='showArr.indexOf(index)!==-1'> {{index}} </div> </div> </div> <script type = "text/javascript"> var vue_det = new Vue({ el: '#intro', data: { arr:[1,2,3,4], showArr:[] }, methods:{ show(index){ let x = this.showArr.indexOf(index) x==-1?this.showArr.push(index):this.showArr.splice(x,1) } } }); </script> </body> </html>