<li @click="show">
<span>1</span>
</li> <li @click="show">
<span>1</span>
</li> <li @click="show">
<span>1</span>
</li>
li点击只让当前的 li 下面的span 隐藏
 

方法一:用vue就尽量遵从数据驱动的想法,实现这个的方法很多,但是尽量不要直接去操作dom。

 
<div id="app">
<ul>
<li v-for="list in lists" @click="show($index)">
<span v-show="$index !== i">{{ list }}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
lists: [1, 1, 1],
i: -1
},
methods: {
show (index) {
this.i = index
}
}
})
</script>

方法2:

<ul id="app">
<li v-for='item in items' @click="toggle(item)">
<span v-if='item.show'>{{item.content}}</span>
</li>
</ul>
new Vue({
el: '#app',
data: function() {
return {
items: [{
content: '1 item',
show: true
}, {
content: '2 item',
show: true
}, {
content: '3 item',
show: true
}]
}
},
methods: {
toggle: function(item) {
item.show = !item.show;
}
}
})

vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效的更多相关文章

  1. vue循环出来列表里面的列表点击click事件只对当前列表有效;

    <div id="app"> <div class=‘b’ v-for='item in items' @click="toggle(item)&quo ...

  2. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

  3. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  4. javascript循环事件只响应最后一次的问题处理

    在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件.如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果.原 ...

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

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

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

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

  7. vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效

    在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...

  8. 由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案。

    由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...

  9. @click.native 会触发原生 click事件 vue

    @click.native 会触发原生 click事件 vue

随机推荐

  1. EPROCESS ETHREAD PEB重要成员

    -----------------------------------------------------------------------win7 x86中-------------------- ...

  2. Spark Streaming Transformations

    map(func):对DStream中的所有的元素进行func转换生成新的DStream flatMap(func):和map方法类似,先对DStream中的元素进行func运算,然后压平,就是说,如 ...

  3. #1062 - Duplicate entry '0' for key 'PRIMARY'—— mysql的小问题

    问题:# 1062 -重复输入“0”. 原因:我估计可能是数据表中主键这一栏已经有一个为“0”了,一般出现这种问题是以int类型的字段在输入时没有输如数据,而int类型默认值为“0”,而你之前第一条数 ...

  4. 了解Greenplum(1)

    了解系列废话: 数据管理系统实现,以Greenplum作为课后实验,这里将实验报告贴出来,纯粹灌水. 1.Greenplum架构 如上图所示,GP的基本结构是单master,多slave节点,客户端连 ...

  5. Sass @warn

    @warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass.如: @mixin adjust-location($x, $y) { @if unitless($x) { @warn &q ...

  6. 理解Promise (3)

    在promise  的then  中我们不仅有 成功状态 失败状态,可能还有等待状态,所以我们要对等待状态进行处理 function Promise(executor) { let self = th ...

  7. mysql 通过navicat 添加函数或者过程

    1. 添加函数时, 函数参数的  varchar(255) 一定要加上 255,返回也要加.不加一直保存不了,狂试: 2. 添加过程时, 进入课程体 编辑时  也要加上 varchar 的位数限制.不 ...

  8. 利用docker制作一个带有redis软件的镜像,供其他人使用

    1. 宿主机在etc/apt/下创建一个haha的文件夹 2.宿主机将haha文件夹映射到容器的虚拟系统中etc/apt/ 3. 此时,可以在宿主机和容器虚拟机中同步创建和删除文件 4. 将宿主机中的 ...

  9. easyui加载json菜单的相关代码

    /** * 取菜单数据 */ $(function getmenujson() { $.ajax({ type: "GET", cache: false, url: "/ ...

  10. 封装 pyinstaller -F -i b.ico excel.py

    安装pywin32,可以参考<怎么给python安装pywin32模块?> 一定要注意对应的python版本,否则不能安装.   5怎么给python安装pywin32模块?   2 用命 ...