vue v-for 列表单独显示与隐藏

大致思路

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>
上一篇:Java List IndexOf(object e)坑


下一篇:Lab: Reflected XSS in canonical link tag:规范链接标签中的反射 XSS