vue列表的单独展开收起和全部展开收起

效果如下

列表的展开收起

html代码

   <div class="content1" v-for="(item, index) in list" :key="index"><img  class="icon-left info-box" src="~@/assets/images/icon_li2@2x.png" /><div class="info-box flex flex-col build_name">{{ item.build_name}}</div><img class="back_right_icon" @click="check(index)" :ref="'icon'+index" :style="{display: isOpen?'block':'none'}" src="~@/assets/images/back_Arrow_down@2x.png" /><img class="back_right_icon"  @click="check(index)" :ref="'icon2'+index" :style="{display: !isOpen?'block':'none'}" src="~@/assets/images/back_Arrow_up@2x.png" /><div  class="content_box"  :ref="'icon3'+index" :style="{display:isOpen?'flex':'none'}" ><div  class="content_span" v-for="(item1, ind) in item.roomList" :key="ind"><span v-if="item1.status_cd=='0'" style="color:#666666;background-color: #F5F5F5;" @click="goDecorationPatrol(item1.serv_code,item1.declare_id)">{{item1.room_num}}</span><span v-if="item1.status_cd=='1'" style="color:#FC5051 ;background-color: #FFF0F0;" @click="goPatrolRecord(item1.serv_code,item1.declare_id)">{{item1.room_num}}<p>待整改</p></span><span v-if="item1.status_cd=='2'" style="color:#00BA61 ;background-color: #DCF9F0;" @click="goDecorationPatrol(item1.serv_code,item1.declare_id)">{{item1.room_num}}</span></div></div></div>

单击方法

 check(index){const first='icon'+index,next='icon2'+index,last='icon3'+indexif(this.$refs[`${last}`][0].style.display=='none'){this.$refs[`${first}`][0].style.display='block'this.$refs[`${next}`][0].style.display='none'this.$refs[`${last}`][0].style.display='flex'}else{this.$refs[`${first}`][0].style.display='none'this.$refs[`${next}`][0].style.display='block'this.$refs[`${last}`][0].style.display='none'}  },

全部切换方法

html代码

<div class="switch_button" @click="isOpen_msg()" v-if="list.length"><img class="switch_img" v-if="isOpen" src="~@/assets/images/icon_sc2@2x.png" /><img class="switch_img" v-if="!isOpen" src="~@/assets/images/icon_zk@2x.png"></div>

方法

  isOpen_msg(){this.isOpen=!this.isOpen}

vue列表的单独展开收起和全部展开收起相关推荐

vue 点击展开显示更多点击收起部分隐藏
vue 点击展开显示更多点击收起部分隐藏要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码: 1.html部分: <div><d ...
vue动画、vue位移动画、vue列表动画
1.vue动画 1.1 vue动画设置把需要显示隐藏做动画的标签放入transition组件中作为子标签注意:transition标签要求仅有一个子标签,多余的不会渲染,如果需要在一个组件中实现多 ...
cmd命令 - vue项目：单独安装vue-router
cmd命令 - vue项目:单独安装vue-router 今天做测试的时候,发现之前的vue项目忘记安装vue-router 为了让项目能重新跑起来,只能另外安装一下vue-router 这里,总结一 ...
【猿说VUE】Vue列表渲染
8 VUE基础:列表渲染我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则 ...
最多显示三行，多余...展开，点击展开收起 getClientRects
需求:显示文本,最多显示三行,多余的显示 ... 展开,点击展开收起. 效果如下: 需要考虑的点:换行,展开的时候遮住收起如果是不需要有固定在右侧的展开收起,那么移动端直接用css3: overfl ...
vue项目-element UI-NavMenu 导航菜单始终只展开一个
vue项目-element UI-NavMenu 导航菜单始终只展开一个全局搜索:unique-opened找到该配置将其改成true unique-opened:是否只保持一个子菜单的展开 < ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
vue列表滚动(无缝衔接)插件分享--超好用
vue列表滚动(无缝衔接)插件分享–超好用地址案例演示 1,下载 cnpm i vue-seamless-scroll 2,查看版本号(package.json)文件 3,在要用的组件页面引入 // ...
Vue 列表下一页上一页
Vue 列表点击下一页上一页示例代码 export default {data() {return {//获取来的数据储存pageData:'',// 总页数pageCount:'',// 当前页 ...

vue列表的单独展开收起和全部展开收起

vue列表的单独展开收起和全部展开收起相关推荐

最新文章

热门文章