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 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- 区间质数查询 luoguP1865
原题 https://www.luogu.org/problemnew/show/P1865 本来get到了一个很好的判断素数的方法 O(玄学常数)https://www.luogu.org/blog ...
- Android NFC 整理
Android NFC基础(多篇) http://blog.csdn.net/think_soft/article/details/8169483
- JAVA 7新特性——在单个catch代码块中捕获多个异常,以及用升级版的类型检查重新抛出异常
在Java 7中,catch代码块得到了升级,用以在单个catch块中处理多个异常.如果你要捕获多个异常并且它们包含相似的代码,使用这一特性将会减少代码重复度.下面用一个例子来理解. Java 7之前 ...
- ios wkwebview同步cookie ajax请求偶尔异常问题
let config = WKWebViewConfiguration.init() config.preferences = WKPreferences.init() config.preferen ...
- Hive_Hive的数据类型
Hive Basic Data Type: Basic Types: tinyint/samllint/int/bigint float/double boolean string Complex T ...
- 用注解@DelcareParents实现引用增强
引用增强,是一个比较特殊的增强,不同于其他方法级别的增强. 引用增强可以实现:一个Java类,没有实现A接口,在不修改Java类的的情况下,使其具备A接口的功能. 先看看背景,我们有个Love接口: ...
- RS485的自动发送与布线
布线http://blog.sina.com.cn/s/blog_729a492301019owo.html 自动收发电路:485注意控制端电平问题(3.3/5V)
- vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)
vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...
- Django中多表的增删改查操作及聚合查询、F、Q查询
一.创建表 创建四个表:书籍,出版社,作者,作者详细信息 四个表之间关系:书籍和作者多对多,作者和作者详细信息一对一,出版社和书籍一对多 创建一对一的关系:OneToOne("要绑定关系的表 ...
- 1102 采药 2005年NOIP全国联赛普及组
1102 采药 2005年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 辰辰是个天资聪颖的孩子 ...