Vue中用v-for循环出来的数据,如何单独控制隐藏显示

搜了好多,没得到想要的答案。

终于用自己的方法解决了问题。

上代码:

html部分

              <dl class="cc" v-for="(item, index) in courseList" :key="index">
                <dt class="active" @click="showAndHide">
                  <h5>{{index + 1}} | {{item.name}}</h5>
                  <span class="arrow"></span>
                </dt>
                <video-list :class_id="classId" :course_id="item.course_id"></video-list>
              </dl>

方法部分

    showAndHide (event) {
      let _el = event.currentTarget
      if (_el.getAttribute(‘class‘) === ‘active‘) {
        _el.setAttribute(‘class‘, ‘‘)
      } else {
        _el.setAttribute(‘class‘, ‘active‘)
      }
    }

达到效果,可以单独控制显示和隐藏

原文地址:https://www.cnblogs.com/ichenchao/p/11651454.html

时间: 2024-10-12 17:12:21

Vue中用v-for循环出来的数据,如何单独控制隐藏显示的相关文章

Vue中用props给data赋初始值遇到的问题解决

Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论 这篇文章主要介绍了Vue中用props给data赋初始值遇到的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象

Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

asp.net 不用控件 循环输出数据库数据的方法

不使用什么repeater gridview之类的控件,怎么才能输出数据库的数据到一个table ,我用response.write在后台,拼接 table 代码可以输出 但总是在页面的最上面 , 是不是要在aspx页面相应位置用<% %> 循环输出 但又提示找不到我后台填充的DATASET,因为听说公司做asp.net是不用控件的,想知道他们是怎么做输出数据库表格的,还请高手帮帮忙,谢谢了. 不明白来问我后台代码public string test = "";    pr

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{&amp;quot;options&amp;quot;:&amp;quot;[{

JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu e/":/"10

Ajax请求php返回json对象数据中包含有数字索引和字符串索引,在for in循环中取出数据的顺序问题

//php中的数组数据格式 Array ( [all] => Array ( [title] => ALL [room_promotion_id] => all ) [best_available_rate] => Array ( [title] => Best Available Rate [room_promotion_id] => best_available_rate ) [30] => Array ( [room_promotion_id] =>

Oracle游标-循环查询表中数据(表名),并执行

Oralce 表中存有一个字段,该字段存储表名,要把该表中的所有表名查询出来(即表名结果集),且执行结果集from 表名结果集: declare v_ccount varchar2(100); --定义一个游标变量 cursor c_job is --查询该表中的所有表名 select tablename from tbname; c_row c_job%rowtype; begin --循环待处理数据,即以上查出的结果集 for c_row in c_job loop ---执行语句 from

JS 循环遍历JSON数据

JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/

sql 循环处理表数据中当前行和上一行中某值相+/-

曾经,sql中循环处理当前行数据和上一行数据浪费了我不少时间,学会后才发现如此容易,其实学问就是如此,难者不会,会者不难. 以下事例,使用游标循环表#temptable中数据,然后让当前行和上一行中的argument1 相加 存放到当前行的 argument2 中,比较简单. --drop table #temptable create table #temptable ( argument1 int, argument2 int, argument3 datetime ) declare @r