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

2021-11-25 16:35:12 阅读：200 来源： 互联网

标签：index arr vue indexOf showArr 列表隐藏

大致思路

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>

标签：index,arr,vue,indexOf,showArr,列表,隐藏
来源： https://www.cnblogs.com/BeatOnDreamOn/p/15603268.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

大致思路