zoukankan      html  css  js  c++  java
  • vue vfor 列表单独显示与隐藏

    大致思路

    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>
  • 相关阅读:
    PyCharm的常用方法
    python的基本语法
    Python 环境搭建----windows
    Python 特点
    DML语句
    DDL语句
    程序员的职业素养 读书笔记
    程序员的职业素养 读书笔记
    程序员的职业素养 读书笔记
    程序员的职业素养 读书笔记
  • 原文地址:https://www.cnblogs.com/BeatOnDreamOn/p/15603268.html
Copyright © 2011-2022 走看看