vue v-for 列表单独显示与隐藏(Vue V-for list shows and hides separately)

大致思路

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>
————————

General idea

< strong > arr is the array of data lists, and showarr is the array of data to be displayed < / strong >

< strong > for the data to be displayed, use V-IF =’showarr.indexof (index)==- 1 ‘to control, display if there is one, and hide if there is none < / strong >

< strong > showarr is empty by default. Click Show / hide to determine whether this data exists in showarr. If yes, delete (hide function) and if not, add (display function) < / strong >

<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>