<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事件只对当前列表有效;的更多相关文章

  1. vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

    <li @click="show"> <span>1</span> </li> <li @click="show&q ...

  2. js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件

    问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#d ...

  3. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  4. Vue.js 系列教程 1:渲染,指令,事件

    原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要 ...

  5. Vue 循环为选中的li列表添加效果

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vu ...

  6. 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去

    在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...

  7. 用js给循环的列表添加click事件

    纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...

  8. vue项目进行时,script标签中,methods事件中函数使用的async/await

    用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...

  9. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

随机推荐

  1. java string(转)

    初探Java字符串 优化变成了忧患:String.split引发的“内存泄露” String是java中的无处不在的类,使用也很简单.初学java,就已经有字符串是不可变的盖棺定论,解释通常是:它是f ...

  2. jsp 预编译

    jspc-maven-plugin <?xml version="1.0" encoding="UTF-8"?> <project xmlns ...

  3. PyAudio 实现录音 自动化交互实现问答

    Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...

  4. 16 Groovy 和并发

    Gpars是groovy的并行处理框架.其支持Actors, Map/Reduce, Dataflow, Fork/Join.关注更多请访问GPars website.

  5. java如果去除中间空格,就不能用trim()这个方法了

    public class Hello { public static void main(String[] args){ String text = "12v 4 6 5 55"; ...

  6. keil_rtx特点

    Keil RTX是一个专为ARM及Cortex M系列处理器开发的无版税的确定的实时操作系统.它允许工程师建立多任务同步并行的程序软件,同时也能帮助使程序代码更加结构化和便于维护.   产品亮点 所有 ...

  7. MySQL简单的确定瓶颈

    如果接到报警可能需要ssh看看瓶颈是什么,怎么下手 确定os层 确定磁盘是否够用的:df –h 再看看系统整体状态: top 哪些进程占用资源比较多,能杀就杀 系统的负载 vmstat看看wa值,r列 ...

  8. Excel2Json记录

    1.有关配置的读取 import configparser import codecs #配置文件格式[config] #自定义的配置key=valuekey2=value2 读取配置 conf = ...

  9. Java 多态抽象

  10. INSERT ... ON DUPLICATE KEY UPDATE产生death lock死锁原理

    前言 编辑 我们在实际业务场景中,经常会有一个这样的需求,插入某条记录,如果已经存在了则更新它如果更新日期或者某些列上的累加操作等,我们肯定会想到使用INSERT ... ON DUPLICATE K ...