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 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- numpy windows环境下载安装
由于numpy在多个平台下非常流行,以至于习惯WINDOWS环境下的用户可能找不到下载位置,更多的时候会下载到zip文件,然后需要安装编译(自然通不过) 1.http://www.scipy.org/ ...
- IT兄弟连 JavaWeb教程 EL与JSTL表达式经典面试题
1.简述EL表达式的作用 EL表达式的作用可分为以下三类 访问Bean的属性. 输出简单的运算结果. 获取请求参数值. 2.JSP标签的作用?如何定义? JSP标签可以分离JSP页面的内容和逻辑,业务 ...
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 经典面试题
1.描述Cookie的作用 Cookie是网站保存在浏览器客户端的信息,也就是说保存在访客的机器里的变量,一般随着HTTP头发送到客户端.在Cookie生效之后及失效之前,客户每次发出页面请求的时候, ...
- URI URN URL的RFC参考文档
- 牛客小白月赛13 E(图、矩阵幂)
AC通道 如果建立第一天某点到某点有几条路的矩阵,做k次矩阵乘就是第k天某点到某点有几条路.统计即可. #include <bits/stdc++.h> using namespace s ...
- GYM 101889E(dp)
dp[i][j][k]表示第i位填数字k时,与后面的相连模数为j时,后面的数字最小填多少. 测得我提心吊胆还以为复杂度高了,结果出来46ms还是cf评测姬强啊. #pragma comment(lin ...
- 洛谷 P2662 牛场围栏
做法是这样的: 首先暴力把所有可能的边长搞出来..(当然<=0的不要) 排序边长+去重, 当且仅当可行边长里面有1时,任何长度都能取到,输出-1 当且仅当所有可行边长的gcd大于1时,不能取到的 ...
- VMware每次联网都需要还原默认设置解决办法
参考:https://zhidao.baidu.com/question/553464573715382812.html
- 084 Largest Rectangle in Histogram 柱状图中最大的矩形
给出 n 个非负整数来表示柱状图的各个柱子的高度,每个柱子紧挨彼此,且宽度为 1 .您的函数要能够求出该柱状图中,能勾勒出来的最大矩形的面积. 详见:https://leetcode.com/prob ...
- C#操作Windows用户
首先需要引入System.DirectoryServices.dll using System; using System.Collections.Generic; using System.Dire ...