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;}}
})

转载于:https://www.cnblogs.com/chen527/p/10020838.html

vue循环出来列表里面的列表点击click事件只对当前列表有效；相关推荐

IE下列表框不能给option绑定click事件的解决办法
列表框代码 <select size="3" ><option>Option1</option><option>Option2< ...
vue循环出来的数据，通过点击事件改变了数据，但是视图却没有更新
列表清单中,每一个列表的说明条件都只显示一条,点击实现折叠面板的效果,需求如下图: 给商品添加了text和flag,点击展开文字,数据进行了更新,但是视图没有变化 <div class=&quo ...
Vue 自定义组件添加点击(@click)事件
在 Vue 开发中自定义组件之后,需要往组件身上添加 click 之类的一些操作事件,但是加上之后会无效. 原因是因为没有加上 native,官网对于 native 的解释为: .native - 监 ...
基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
vue循环如何传参数 php,vue循环列表动态数据的处理方法（代码）
本篇文章给大家带来的内容是关于vue循环列表动态数据的处理方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 调用方法:Vue.set( target, key, value ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
目录一. 模板语法插值语法二. 指令 2.1 文本指令 v-html:让HTML渲染成页面 v-text:标签内容显示js变量对应的值 v-show:显示/隐藏内容 v-if:显示/删除内容 2 ...
Python编程语言学习：列表与字典互转的几大方法集锦、从列表中按顺序循环抽走一个元素输出剩余元素之详细攻略
Python编程语言学习:列表与字典互转的几大方法集锦.从列表中按顺序循环抽走一个元素输出剩余元素之详细攻略目录列表与字典互转的几大方法集锦 T1.基于两个列表利用zip函数来构造字典 <
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...

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

vue循环出来列表里面的列表点击click事件只对当前列表有效；相关推荐

最新文章

热门文章