vue循环出来列表里面的列表点击click事件只对当前列表有效;
<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事件只对当前列表有效;的更多相关文章
- vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
<li @click="show"> <span>1</span> </li> <li @click="show&q ...
- js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件
问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- Vue.js 系列教程 1:渲染,指令,事件
原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...
- Vue 循环为选中的li列表添加效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...
- 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去
在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...
- 用js给循环的列表添加click事件
纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...
- vue项目进行时,script标签中,methods事件中函数使用的async/await
用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- [Xcode 实际操作]八、网络与多线程-(25)实现ShareSdk的社会化分享功能
目录:[Swift]Xcode实际操作 完成开发包的安装和配置之后,本文将演示社会化分享功能的具体开发步骤. 在项目导航区,打开并编辑程序代理文件[AppDelegate.swift] import ...
- __str__,__repr__
目录 __str__ __repr__ __str__ 打印时触发 class Foo: pass obj = Foo() print(obj) <__main__.Foo object at ...
- web前端篇:JavaScript正则表达式
目录 JavaScript正则表达式 1.创建正则表达式 1.1方法1:直接量语法 1.2 方法2:创建RegExp对象的语法 1.3 区别: 1.4正则表达式使用 2.正则对象的属性 2.1.属性 ...
- eclipse svn 相关
eclipse本身带有cvs插件,我们也可以在eclipse里面加上svn插件,请参考eclipse安装svn插件,以及使用,但是在eclipse的左边栏,.svn,.cvs的文件会显示出来,目录拉的 ...
- ACM2015沈阳:B-Bazinga
2019.1.24 数据范围:\(n<=500,m<=2000\) 这个题最裸的暴力就是对于每个字符串,都去验证一次,时间复杂度\(O(n^2m)\) 我们发现,如果对于字符串\(i\), ...
- jdbc学习day1
- UILabel和UIbutton(富文本)封装方法
/** 方法说明:设置label的富文本属性 参数说明:contentStr富文本内容 textColor字体颜色 rangeSet设置字体颜色及大小的位置 */ - (UILabel *)backf ...
- NOIP前计划
距离NOIp还有13天 距离继续学/退役还有13天 是时候列一波计划了 1. 要学的东西 cdq分治(突然发现cdq分治不太行,而且说不定可以用来代替想不出来的数据结构题) 主席树(写的太少啦,不熟练 ...
- MySQL慢查询日志的使用
当系统性能达到瓶颈的时候,就需要去查找那些操作对系统的性能影响比较大,这里可以使用数据库的慢查询日志功能来记录一些比较耗时的数据可操作来确定哪些地方需要优化. 下面介绍一下使用慢查询日志的一些常用命令 ...
- Azkaban的功能特点(二)
Azkaban是什么?(一) 不多说,直接上干货! http://www.cnblogs.com/zlslch/category/938837.html Azkaban的功能特点 它具有如下功能特点: ...