vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
<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事件只对当前列表有效的更多相关文章
- vue循环出来列表里面的列表点击click事件只对当前列表有效;
<div id="app"> <div class=‘b’ v-for='item in items' @click="toggle(item)&quo ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- javascript循环事件只响应最后一次的问题处理
在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件.如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果.原 ...
- 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去
在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...
- 用js给循环的列表添加click事件
纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...
- vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效
在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...
- 由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案。
由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时 不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该 ...
- @click.native 会触发原生 click事件 vue
@click.native 会触发原生 click事件 vue
随机推荐
- 利用js使图片外层盒子的高等于适应图片的高
JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...
- Waiting for table flush 阻塞查询的问题
1.此状态表示大量thread正在等待慢查询语句执行完成. 原因: The thread got a notification that the underlying structure for a ...
- C++ 数组动态分配
数组的动态内存分配 #include <iostream> //一维数组 void oneDimensionalArray() { //定义一个长度为10的数组 int* array = ...
- 2018-8-10-WPF-控件继承树
title author date CreateTime categories WPF 控件继承树 lindexi 2018-08-10 19:16:53 +0800 2018-2-13 17:23: ...
- Firewalld--01 防火墙安全、基本指令、区域配置
目录 Firewalld防火墙安全.基本指令.区域配置 1. 防火墙安全基本概述 2. 防火墙使用区域管理 3. 防火墙基本指令参数 4.防火墙区域配置策略 Firewalld防火墙安全.基本指令.区 ...
- mv 移动或重命名文件
1. 命令功能 mv:移动或改文件名 2. 语法格式 mv [option] source dest mv 选项 源文件 目标文件 参数 参数说明 -f 如果目标文件存在,则不会询问而是直接覆 ...
- OA是Office Automation
OA是Office Automation OA是Office Automation OA是Office Automation
- openGL如何在改变窗口大小时,使自己的图形不被拉伸
这里要注意两个概念:视口和视景体,当视口的纵横比和视景体的纵横比相同的时候,改变窗口大小,图像才不会变形: 视景体是指成像景物所在空间的集合.它是一个空间集合体. 单个的视景体,比如一个球体,若要完全 ...
- windows下如何安装pip
在安装pip前,请确认win系统中已经安装好了python,和easy_install工具 Python完成后 配置环境变量 在环境变量中添加Python目录 (1) 右键点击"计算机&qu ...
- java.util.Date 与 java.sql.Date 相关知识点解析
问:java.sql.Date 和 java.util.Date 有什么区别? 答:这两个类的区别是 java.sql.Date是针对 SQL 语句使用的,它只包含日期而没有时间部分,一般在读写数 ...