vue中,在循环中操作事件,如何控制元素展示隐藏 5C
 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu in menus">
            <div class="firstLever close" @click="openOrLoadChild(menu)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

比如:我点击第一元素,所有的secondAllLeverContainer都展开了,因为isShow是全局的,如何做,才能只执行当前循环体的中的事件呢

0

3个回答

menus 是一个列表对吧 ,

//给menus 列表中的每一个元素添加一个额外的属性值,isShow
menus = this.map(menu=>{
    menu.isShow = false;
        return menu;
}) 

            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>

                        //改为  isShow -->menu.isShow  既可

                        <div class="secondAllLeverContainer" v-bind:class="{isShow:menu.isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
0
qq_29594393
当作看不见 列表项的展示和影藏,最简单的实现方式,后面执行完,如果不希望包含isShow 这个属性,那么再删除一下就好.
12 个月之前 回复
 <template>
    <div>
        <div class="firstLeverContainer" v-for="(menu,index) in menus">
            <div class="firstLever close" @click="openOrLoadChild(menu,index)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" style="display:none;">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>


openOrLoadChild: function(menu,index) {
        let sub_menu = this.$el.querySelectorAll('.secondAllLeverContainer');
        for(let j = 0,len=sub_menu.length; j < len; j++) {
          if(index == j) {
            if(sub_menu[j].style.display == "none") {
              sub_menu[j].style.display = "block";
            } else {
              sub_menu[j].style.display = "none";
            }
          } else if(sub_menu[j].style.display == "block")  {
            sub_menu[j].style.display = "none";
          }
        }
      },

0

看你需要的效果是什么的,1L的办法可以实现每一项的显示和隐藏的切换,就是可以同时显示多项,点击的时候只要把对应的isShow取反就可以;
如果是每次只显示一项的话,就可以直接定义一个全局变量记录当前显示项的下标或者数组中的ID等唯一性的标识

 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu,index in menus">
            <div class="firstLever close" @click="openOrLoadChild(index)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow===index}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

openOrLoadChild(index){
    this.isShow=index
}

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue中v-for循环时只处理事件触发项的内容(仅一项)
关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案:(1)获取v-for循环内容中的下标值(val为navContent中的内容,index为下标)        &amp;lt;p v-for=&quot;(val,index) in navContent&quot; class=&quot;nav&quot;&amp;gt;            {{val}} --{{index}}     &amp;lt;i ...
有关react中每个按钮控制自己的div显示与隐藏问题
题目虽然带着“react”,可是实现的思路跟react没有关系,只不过项目用的框架是react而已。需求是这样的,页面一加载的时候从请求的接口中循环出嵌套三层的数组,当然,这不是重点,重点是想要实现的效果是点击每个标题旁的按钮,能对应显示标题下面的内容。效果如图实现的思路就是当点击按钮时,给最外层数组的对象添加一个boolean值,通过每次点击按钮使这个值变为与上次相反的值,来实现自元素显示与隐藏...
使用vue控制元素显示隐藏
HTML代码: &amp;lt;div title=&quot;意向价格&quot; v-if=&quot;showPrise&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div title=&quot;意向租金&quot; v-if=&quot;showRentPrise&quot;&amp;gt;&amp;lt;/div&amp;gt; JS代码: new Vue({ el: '#app',
使用Vue中 v-for循环列表,控制按钮隐藏显示
v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。 - 实现效果如图 需求描述: 第一个显示蓝色按钮,代表数据最终状态;其余按钮为灰色,显示数据流转记录。 返回的数据类型 前端页面代码 &amp;lt;div class=&quot;leftProcessBox...
for循环中的事件绑定
html &amp;lt;button&amp;gt;按钮1&amp;lt;/button&amp;gt; &amp;lt;button&amp;gt;按钮2&amp;lt;/button&amp;gt; &amp;lt;button&amp;gt;按钮3&amp;lt;/button&amp;gt; &amp;lt;button&amp;gt;按钮4&amp;lt;/button&amp;gt; &amp;lt;button&amp;gt;按钮5&amp;lt;
关于循环输出后怎么控制隐藏显示
今天在做前端一个小功能的时候,需要将循环输出的隐藏和显示,但他们是一起循环出来的,F12后发现他们的确是具有相同的id、class的标签,在页面上需要按特定条件隐藏和显示,之前一直是使用id,结果一起不隐藏,最开始以为是业务部分错了,没运行到这,或者是页面元素搞错了?又F12查看html,结果也是对的,折腾了好久。。最后还是在网上的一个百度知道回答的问题提示了我,在同一页面上标签id是不可以重复的,
vue 取出v-for循环中的index值
一开始接触到vue的for循环就觉得贼好用,重复性的东西再也不用ctrl C+ctrl V了好吗。不仅代码可复用了,而且提高了代码可读性、减轻了工作量,更重要的是写代码都有成就感了。 贴出个小小例子: template &amp;lt;ul v-for=&quot;(item,index) in pcState&quot;&amp;gt; &amp;lt;li&amp;gt;{{item.nam...
Vue-1-循环和点击事件
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>入门</title> <script></script> <script src="../js/vue.js"></script></head>
react控制元素的显示或隐藏
如图所有,当我选择公司性质为 “默认” 或者 “个人” 时候 ‘公司全称’字段是隐藏。当我们选择公司性质为“公司”时 ‘公司全称’字段展示。 默认状态: 公司性质为“公司” 这个功能该如何实现呢? 思路: 1.在‘公司性质’这个 select框上面绑定一个 onchange事件,每次变化 获取到当前select框 对应的值。 2.将获取到当前select框的值写一个接口...
vue.js之v-for循环中动态改变每个item的样式
vue.js之v-for循环中动态改变每个item的样式 1.需求 支持单击选中,再次单击取消选中 当未选中任何条件按钮时则自动选择全部 点击A则选中第一行全部,点击C代表选中第二行全部 选择全部时(默认选择全部),自动取消其他选择 2.思路 定义数据的结构,将产品分类,A,C,elseProduct &quot;全部&quot;按钮,以及每个产品中应有是否选中的flag,以及点击事件 ...
让Delphi程序在循环中响应界面相关操作..rar
让Delphi程序在循环中响应界面相关操作..rar
swiper在vue里v-for循环后添加点击事件
swiper官方文档里有 点击事件的文档 在html上为轮播添加一个自定义事件 在js里获取到自定义事件传的值 然后跳转
JavaScript菜鸟教程 grammar
chapter1 name:计数法<html> <body><p id ="demo"> as if here is something </p><script> document.getElementById("demo").innerHTML = 123e5; </script></body> </html>chapter2 name:variety<htmL> <body>
vue 控制某个元素的显示与隐藏之v-if属性
HTML代码: &amp;lt;div title=&quot;意向价格&quot;   v-if=&quot;showPrise&quot;&amp;gt;&amp;lt;/div&amp;gt;  &amp;lt;div title=&quot;意向租金&quot;   v-if=&quot;showRentPrise&quot;&amp;gt;&amp;lt;/div&amp;gt; JS代码: new Vue({         el: '#app',         data: {  
在vue项目中,通过v-for循环,动态添加后台返回的事件[转载]
一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路:   1.假定后台返回数据为如下格式:     list: [ { name: '李寻欢', kungFu: '小李飞刀', method: &quot;foo('林诗音')&quot; }, { name: '楚留香', ...
Vue教程03:Vue事件、v-show、v-if指令
v-on指令 代码参考:lesson03/01. v-on指令.html 通过v-on指令添加事件,如v-on:click=“onClick(1)”,表示添加的是click事件,同时传入1作为参数。 v-on:click=&amp;quot;onClick(1)&amp;quot;也可以简写为@click=“onClick(1)”。 JavaScript: let vm = new Vue({ el: '#app', // ...
多层 VUE 循环中,在子循环中拿到父循环的 index
VUE 中可以实现多层循环,有的时候需要在当前循环中拿到上一层循环中的某个字段值或者 index,从而去进行判断或者是干别的事情,可以通过如下方法先拿到父循环的 index,然后通过 index 去拿其他想要的字段值: N层v-for 里面, 当前层的 index 可以通过 $index 得到 ,上一层的通过 $parent.$index, 在向上也是如此,以此类推!!!
vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
https://segmentfault.com/q/1010000005160077
探究点击事件在JavaScript事件循环中的表现
本文探究一下点击事件在event loop的情况。点击事件是同步还是异步?点击事件何时加入事件队列?点击事件加入事件队列的是什么,是回调函数吗?
vue学习记录(一)
学习自vue官网vue:构建用户界面的渐进式框架。&amp;lt;!-- 开发环境版本,包含了用帮助的命令行警告 --&amp;gt; &amp;lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;!-- 生产环境版本,优化了尺寸和速度 --&amp;gt; &amp;lt;script src=&quot;https://cdn.j...
在for循环中动态拼接字符串和添加事件
不多说,直接开始 ES6之前常用写法: for(var i = 0;i&amp;lt;10;i++){   /闭包写法   (function(j){ var a = document.createElement(&quot;div&quot;);    a.innerHTML = j + &quot; &quot;;     a.addEventListener(&quot;click&quot;,function(){   ...
为什么在foreach循环中进行元素remove/add操作,会抛ConcurrentModificationException 异常?
运行以下代码: @Test public void test() { List&amp;lt;String&amp;gt; list = new ArrayList&amp;lt;&amp;gt;(); list.add(&quot;A&quot;); list.add(&quot;B&quot;); for (String temp : list) { // 当为A...
循环使用element-ui中的Popover弹出框
应项目需求,需要完成一个表格,表格中有客户操作状态字段,hover上去就会拿到此客户的id,并请求后台拿到状态,显示客户状态到哪步了,效果如下: 代码如下: &amp;lt;el-table-column label=&quot;客户操作进度状态&quot; width=&quot;190&quot;&amp;gt; &amp;lt;template slot-scope=&quot;scope&quot;&amp;gt; ...
接口与委托的方法调用效率对比例子
例子展示了以下两种思路的效率对比: 1.在循环中使用实现了接口的实例方法执行某操作; 2.在循环中使用委托集合执行相同的操作。 此例被应用于IEPI.App.Expression的支持变量的表达式解析。
JS控制元素的显示和隐藏
开发工具与关键技术: DW、前端 作者:梁锦豪 撰写时间:2019/1/16 当我们想要通过事件来控制元素时,我们可以用JavaScript来实现 下面是通过鼠标移入,移出事件来控制元素的显示与隐藏的例子: 首先,要先申明变量,找到元素: 然后给它添加移入事件(onmouseover)移出事件(onmouseout) 通过函数function()来控制标签中的display的值,从而达到移入...
vue中快速使用svg方法(自动导入)
1.安装插件:npm install svg-sprite-loader --save-dev 2.配置svg-sprite-loader:,在目录build 中找到webpack.base.conf // 注释默认配置 // { // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // loader: 'url-loader', // o...
vue2.x 使用event返回当前点击事件的对象(主要应用在循环出来的dom元素设置点击时,返回当前被点击的dom对象)
我的需求:点击div时就将我点击的这个div里面的button显示出来,再次点击就隐藏 首先看看循环出来的HTML代码模块 &amp;lt;div class=&quot;lession&quot; v-for=&quot;data in course_data.lessions&quot; @click=&quot;showbutton(data.teachers,$event)&quot;&amp;gt; &amp;lt;div class=&quot;ltitle&quot;&amp;gt;
vue 点击展开显示更多 点击收起部分隐藏
功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: &amp;lt;div&amp;gt; &amp;lt;p v-for=&quot;(item, index) in showdetailList&quot;&amp;gt; &amp;lt;span&amp;gt;{{item.title}}&amp;lt;/span&amp;gt; &amp;l...
vue中for循环的class绑定事件
&amp;lt;ul&amp;gt; &amp;lt;li @click=&quot;clickCategory(index)&quot; :class=&quot;{categoryActive : categoryIndex == index}&quot; v-for=&quot;(item, index) in category&quot; :key=&quot;index&quot;&amp;gt; {{item.MALL_CATEG
对循环中setTimeout执行过程的思考
参考文章:这个前端面试在搞事! 题目 for (var i = 0; i &amp;lt; 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); } 答案 每隔一秒输出5 分析 由于setTimeout会延迟执行,所以处理结果是执行循环之后再将里面的函数压入事件队列。执行循环的时候压入队列的函数是...
for循环中嵌套异步请求问题
 先说解决办法:用递归 //for中嵌套异步时,执行顺序会混乱 function forTest(){ for(var i=0; i&amp;lt;10; i++){ (function(j){ setTimeout(function(){ console.log(&quot;第&quot;+(j+1)+&quot;次循环&quot;); }, Math.random() * 3000); }(i)); } ...
Vue.js 条件与循环&计算属性&监听属性
条件判断 v-if 条件判断使用 v-if 指令: 参考上一篇博客看第二点指令那块 v-else 可以用 v-else 指令给 v-if 添加一个 "else" 块 v-else-if v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
for循环中的闭包应用
1、下面代码的输出为什么?使下面代码的输出结果为0 1 2 3 4,应如何修改下面的代码?请使用多种方式来实现for(var i=0;i&amp;lt;5;i++){ setTimeout(function(){ alert(i); },100) } 上述代码会输出5个5。因为setTimeout是一个异步任务,它会在循环完成后才进行,此时i=5.若要实现输出结果为0 1 2 3 4,也可...
vue在循环时如何动态改变class
以前遇到过 动态显示图片 用 img :src=method(param) method :return 。。。 包括 video audio 都是一样的。 今天处理的是,vue动态绑定class ,简单说 隔行换class样式 1.for循环:v-for="(item,arr) in jdList" item是变量 ,arr 是 下标 顺序别搞错 2...
js的一个小技巧--在遍历循环中某些代码只允许执行一次
在这段时间开发业务中,遇到了其实也还算比较常见的问题,也不难!就做个简单的记录吧! upload 这样一个场景,前端去计算文件md5值,在计算MD5值的时间内需要显示文件的状态是“正在计算md5值”,当然显示状态在计算过程中我们只需要触发一次,而恰恰计算的过程就类似于一个循环或者递归,我们该怎样去只让它运行一次呢?当然计算函数是连续触发的,状...
$.Deferred(),for循环内异步请求问题的解决办法
$.Deferred(),for循环内异步请求问题的解决办法
List循环中删除元素
普通的循环中是不能删除元素的,如下 import java.util.ArrayList; import java.util.List; import org.apache.commons.lang3.StringUtils; import org.junit.Before; import org.junit.Test; public class ListTest { List&amp;lt;...
async/await - 8.在for循环中正确的使用await
async/await - 8.在for循环中正确的使用awaitconst fetch = require('node-fetch') const bluebird = require('bluebird')async function getZhihuColumn(id) { await bluebird.delay(1000) const url = `https://zhuanla
vue的多层循环
我的json格式如下: &quot;cit&quot;: { &quot;A&quot;: [{ &quot;id&quot;: &quot;01&quot;, &quot;name&quot;: &quot;A1&quot; }, { &quot;id&quot;: &quot;02&quot;, &quot;name&quot;: &quot;A2&quot; }], &quot;B&quot;:[{ &quot;id&quot;: &quot;03&quot;,
java 在一个循环中删除一个列表中的元素
思考下面这一段在循环中删除多个元素的的代码ArrayList&amp;lt;String&amp;gt; list = new ArrayList&amp;lt;String&amp;gt;(Arrays.asList(&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;)); for(int i=0;i&amp;lt;list.size();i++){ list.remove(i); } System.out.println(list);输