<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. P4827 [国家集训队] Crash 的文明世界(第二类斯特林数+树形dp)

    传送门 对于点\(u\),所求为\[\sum_{i=1}^ndis(i,u)^k\] 把后面那堆东西化成第二类斯特林数,有\[\sum_{i=1}^n\sum_{j=0}^kS(k,j)\times ...

  2. hyperledger fabric 1.0.5 分布式部署 (六)

    如何在相同的peer 节点上创建多个 channel 作者在hyperledger fabric 1.0.5 分布式部署 (五)已经向读者们介绍了一个简单的fabric 的部署流程,那么根据上一篇博客 ...

  3. 【Luogu P1502】 窗口的星星

    →传送窗口 (复制一下题面好了~) 题目背景 小卡买到了一套新房子,他十分的高兴,在房间里转来转去. 题目描述 晚上,小卡从阳台望出去,“哇~~~~好多星星啊”,但他还没给其他房间设一个窗户,天真的小 ...

  4. MySQL--表操作1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql 系统环境:win 注:本次所有命令都是在命令行上执行 数据库的四大天王操作:增删改查 增删改查都是在对表进行操 ...

  5. C - Brackets

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  6. python的正则表达式支持(链接)

    http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html

  7. Technocup 2017 - Elimination Round 1 (Unofficially Open for Everyone, Rated for Div. 2) B

    Vasily exited from a store and now he wants to recheck the total price of all purchases in his bill. ...

  8. String的内存和intern()方法

    一.关于常量池 字符串在Java中用的非常得多,Jvm为了减少内存开销和提高性能,使用字符串常量池来进行优化. 在jdk1.7之前(不包括1.7),Java的常量池是在方法区的地方,方法区是一个运行时 ...

  9. docker镜像与容器

    目录 docker镜像与容器 概述 分层存储 镜像与容器 删除镜像与容器 将容器中的改动提交到镜像 慎用 docker commit--构建镜像推荐使用dockerfile docker镜像与容器 概 ...

  10. C# winwordcontrol控件编程

    C# word控件WinWordControl可创建.编辑.保存word. 1.使用代码直接创建word文件,同时可以添加页眉.内容.图片及表格,示例代码: /// <summary>   ...