<div id="app">
<div class=‘b’ v-for='item in items' @click="toggle(item)">
<span v-if='item.show'>{{item.cl}}</span>
</div>
</div>

  b里的每个div 都有span隐藏的。当点击 div 类名为b 时候,点击那个 那个div 里的span 下显示 再点击是隐藏。

new Vue({
el: '#app',
data: function() {
return {
items: [{
cl: '数据11111',
show: true
}, {
cl: ‘数据22222’,
show: true
}
]
}
}, methods: {
toggle: function(item) {
item.show = !item.show;
}
}
})

vue循环出来列表里面的列表点击click事件只对当前列表有效;的更多相关文章

  1. vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

    <li @click="show"> <span>1</span> </li> <li @click="show&q ...

  2. js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件

    问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...

  3. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  4. Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  5. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  6. 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  7. 用js给循环的列表添加click事件

    纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...

  8. vue项目进行时,script标签中,methods事件中函数使用的async/await

    用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...

  9. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

随机推荐

  1. 洛谷P3232 [HNOI2013]游走(高斯消元+期望)

    传送门 所以说我讨厌数学……期望不会高斯消元也不会……好不容易抄好了高斯消元板子被精度卡成琪露诺了…… 首先,我们先算出走每一条边的期望次数,那么为了最小化期望,就让大的期望次数乘上小编号 边的期望次 ...

  2. Java并发编程笔记

    进程:程序的一次运行活动. 线程:程序的一个控制流程.用于执行一个任务.是cpu进行调度的最小单位. 死锁:所有的线程继续执行所需要的资源都被其他线程占用,导致所有线程都不能继续执行. 死锁的情景:1 ...

  3. 选择提示框UIAlertController 和网络状态判断AFNetworking

    // 选择提示框 DownloadView *vc = [[DownloadView alloc] initWithFrame:CGRectMake(, , SCREEN_WIDTH, SCREEN_ ...

  4. AKOJ-1265-输出二叉树

    链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=1265 题意: 我们知道二叉树的先序序列和中序序列或者是中序和后序能够唯一确定一颗二叉树.现在给一 ...

  5. Java EE学习笔记(五)

    Spring事务管理 1.Spring事务管理概述 1).在实际开发中,操作数据库时都会涉及到事务管理问题,为此Spring提供了专门用于事务处理的API.(事务特性:ACID,原子性,一致性,隔离性 ...

  6. flask 学习app代码备份

    #!/usr/bin/python # -*- coding: UTF-8 -*- from flask import Flask, url_for from flask import request ...

  7. Springboot日志配置探索(主要看logback)(二)

    这篇博客主要是讲在Springboot中扩展的日志框架的配置,也是主要讲logback 8 继续看文档,这里讲到: springboot里面还有几个日志系统框架可以选择使用,你可以通过在classpa ...

  8. java 利用c3p0管理数据库连接池

    数据库连接池类,用于获取数据库连接.利用单例模式保证所有的连接都只通过一个连接池管理. package com.mousewheel.dbcon; import java.io.InputStream ...

  9. SpringBoot 2.x (9):整合Mybatis注解实战

    SSM框架再熟悉不过了,不过以前通常是使用XML写SQL语句 这里用SpringBoot整合Mybatis并且使用注解进行开发 依赖: <!-- Mybatis --> <depen ...

  10. mongodb 文本索引

    启用文本搜索: 最初文本搜索是一个实验性功能,但2.6版本开始,配置是默认启用的.但是,如果使用的是以前 MongoDB 的版本,那么必须启用文本搜索,使用下面的代码: >db.adminCom ...