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 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- css文本之蛇
文本之蛇 css把文本当做一行来处理,把他们放在一个看不见的盒子里面.盒子遇到容器的外边界会折行.所有的文本属性都应用于这个盒子,而不是包含文本的容器. 最有用的8个文本属性 文本缩进(text-in ...
- MyBatist庖丁解牛(五)
很多时候我们在自己的每个service中没有中注入SqlSessionTemplate; 但是我们直接调用mapper接口方法就直接能够操作数据库 这个是为什么??下面开始解惑: Mybatis Sq ...
- iOS开发:创建推送开发证书和生产证书,以及往极光推送官网上传证书的步骤方法
在极光官网上面上传应用的极光推送证书的实质其实就是上传导出的p12文件,在极光推送应用管理里面,需要上传两个p12文件,一个是生产证书,一个是开发证书 ,缺一不可,具体如下所示: 在开发者账号里面创建 ...
- django_auth模块
auth是django提供的标准权限管控系统,可以提供用户的身份认证.用户组和权限管理. auth可以和admin配合使用,可以快速建立网站的管理系统. USER user用于维护系统的用户信息,在数 ...
- python 基础(十二) 图片简单处理
pillow 图片处理模块 安装 pip install pillow pip是安装第三方模块的工具 缩放图片实例 from PIL import Image path = r'C:\Users\x ...
- [软件工程基础]2017.11.02 第六次 Scrum 会议
具体事项 燃尽图 每人工作内容 成员 已完成的工作 计划完成的工作 工作中遇到的困难 游心 #10 搭建可用的开发测试环境:#9 阅读分析 PhyLab 后端代码与文档:#8 掌握 Laravel 框 ...
- 牛客练习赛42D(性质、数学)
题目传送 就像题解所说的,写几个可以发现有分成四段的性质:第一段是从n开始往下贪,第二段是个数字,第三段……卧槽好吧真难描述. 然后发现这个数据量可达1e9,所以考虑“二分确定序列+数学计算”的方式解 ...
- 转 如何诊断和解决high version count 10.2.0.4 and 11.2.0.4
转自 http://blog.csdn.net/notbaron/article/details/50927492 在Oracle 10g以上的版本,High version count可谓是一个臭名 ...
- CPU占用分析
用TOP命令很容易定位到时谁占用CPU最高 多线程的进程,我们要知道实际上占用cpu的最小单位是线程,所以肯定是众线程中的某一个或几个占用CPU过高导致的.top -H -p pid命令查看进程内各个 ...
- Unity Shader入门精要学习笔记 - 第2章 渲染流水线
来源作者:candycat http://blog.csdn.net/candycat1992/article/ 2.1 综述 渲染流水线的最终目的在于生成或者说是渲染一张二维纹理,即我们在电脑屏 ...