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 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
随机推荐
- IT兄弟连 JavaWeb教程 JSTL标签的使用
假定甲方打算使用乙方开发的标签库,乙方把与标签库相关的所有文件打包成为了一个JAR文件(假定名为standard.jar),在这个JAR文件中包含以下内容: ● 标签处理类及相关的.class文件 ...
- 第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页
下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点 ...
- Android的文件读取与存储
Java新建文件,然后就可以写入数据了,但是Android却不一样,因为Android是 基于Linux的,我们在读写文件的时候,还需加上文件的操作模式 Environment类是一个提供访问环境变量 ...
- 命令行视频下载工具 you-get 和 youtube-dl
you-get 和 youtube-dl 都是基于 Python 的命令行媒体文件下载工具,完全开源免费跨平台.用户只需使用简单命令并提供在线视频的网页地址即可让程序自动进行嗅探.下载.合并.命名和清 ...
- android的handle
Handler的定义: 用来接收子线程发送过来的数据,并利用该数据直接更新主线程的UI. 安卓中,一个应用启动时会开启一个主线程(UI线程),他的责任是负责管理界面中的控件.比如当你点击一个Butt ...
- CSS 条纹背景深入
一.水平渐变 实现水平条纹很简单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Partition(线段树的离线处理)
有一点类似区间K值的求法. 这里有两颗树,一个是自己建的线段树,一个是题目中给定的树.以线段树和树进行区分. 首先离散化一下,以离散化后的结果建线段树,线段树的节点开了2维,一维保存当前以当前节点为权 ...
- css选择器(基础)
CSS选择器: 一个样式的语法是由选择器+属性+属性值三部分组成: 到底什么是选择器呢? 答:个人直白的理解为:选择一种要对它进行操作的标签的方法就叫做选择器.也就是说选择器就是一种选择元素的 ...
- eclipse版本要求修改
eclipse要求打开的是java1.6,而安装的是java1.7,这个时候需要修改配置 找到JAVA的安装路径, 点击前往-电脑-资源库-Java-javaVCirtualMachines-...- ...
- uvm_globals——告诉这个世界我爱你
uvm_globals.svh 存放全局的变量和方法.当UVM平台启动时,便在uvm_globals查找相应的方法,uvm_globals 的方法实现也比较简单,就是调用uvm_root对应的方法.其 ...