-
2020-12-22 11:16:33
<view class="btnBox"> <view v-for="(item, index) in pageObj.btnList" :key="index"> <view class="page__bd"> <view class="page__bd page__bd_spacing title__bd walltBtnBox"> <image :src="walletImg[index]" class="walletImg"></image> <button class="weui-btn walltBtn" @tap="tapClick(item.bindtap,{id:index})">{{item.name}}</button> <view class="rightArrow arrowPosition"></view> </view> </view> </view> </view>
//data btnList:[ { bindtap:'one' }, { bindtap:'two' } ] //methods tapClick(tap,params){ //循环使用不同点击事件 this[tap](params) }, one(e){ console.log("id是:",e.id) console.log("one") }, two(e){ console.log("id是:",e.id) console.log("two") }
更多相关内容 -
vue2.0 循环遍历加载不同图片的方法
2020-08-27 21:55:19下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue循环中点击选中再点击取消(单选)的实现
2020-10-14 19:15:05主要介绍了vue循环中点击选中再点击取消(单选)的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020-10-15 11:06:28主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
vue实现循环滚动列表
2020-10-15 04:30:21主要为大家详细介绍了vue实现循环滚动列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
Vue通过for循环随机生成不同的颜色或随机数的实例
2020-10-16 00:45:29今天小编就为大家分享一篇Vue通过for循环随机生成不同的颜色或随机数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue循环中多个input绑定指定v-model实例
2020-11-19 17:37:44Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在... -
vue中的循环对象属性和属性值用法
2020-12-28 16:13:48v-for除了可以循环数组,还可以循环对象。 例子: (item,i)>{{i}}--{{item}} [removed] export default { name: HelloWorld, data () { return { obj:{ age:1, name:zs, sex:男 } }; } } [removed] ... -
vue如何解决循环引用组件报错的问题
2021-01-19 18:42:49问题由来 最近在做项目的时候遇到使用循环组件,因为模式一样...查询了网上各种资料之后,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。 解决方式 解 -
Vue v-for循环之@click点击事件获取元素示例
2020-10-16 00:43:02今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue的for循环使用方法
2020-10-17 10:23:58在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤,有需要的朋友们跟着学习下。 -
vue 解决循环引用组件报错的问题
2020-10-18 01:41:29今天小编就为大家分享一篇vue 解决循环引用组件报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue-for循环嵌套操作示例
2020-10-17 11:26:26主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下 -
vue forEach循环数组拿到自己想要的数据方法
2020-10-17 23:44:51今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue动态生成dom并且自动绑定事件
2020-08-30 18:51:08本篇文章主要介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,有兴趣的可以了解一下。 -
在Vue 中实现循环渲染多个相同echarts图表
2020-10-15 02:55:17主要介绍了在Vue 中实现循环渲染多个相同echarts图表,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 循环中绑定事件是否需要事件委托
2020-06-24 16:54:48那么vue 循环中绑定事件是否需要事件委托?。 通过打印出下面简单实例编译出来的render函数 <div id="demo"> <a v-for="item in [1,2]" @click="clickFn">1</a> </div> 我们得到下面的...事件委托是在js中减少事件绑定的方式,是一种常用的js优化方法。曾经review其他人的代码,发现很多同学在循环的时候直接在循环元素上绑定事件。那么vue 循环中绑定事件是否需要事件委托?。
通过打印出下面简单实例编译出来的render函数
<div id="demo"> <a v-for="item in [1,2]" @click="clickFn">1</a> </div>
我们得到下面的结果:
ƒanonymous() { with(this) { return _c('div', { attrs: { "id": "demo" } }, // 这部分就是循环 _l(([1, 2]), function(item) { return _c('a', { on: { "click": clickFn } }, [_v("1")]) }), 0) } }
查找源代码得_l 的函数定义如下:
export function renderList ( val: any, render: ( val: any, keyOrIndex: string | number, index?: number ) => VNode ): ?Array<VNode> { let ret: ?Array<VNode>, i, l, keys, key if (Array.isArray(val) || typeof val === 'string') { ret = new Array(val.length) for (i = 0, l = val.length; i < l; i++) { ret[i] = render(val[i], i) } } ... 省略了不相关分支代码 (ret: any)._isVList = true return ret }
也就是说这东西会return一个包含两个a标签,包含on属性的vnode的数组
export function initEvents (vm: Component) { vm._events = Object.create(null) vm._hasHookEvent = false // 初始化父类绑定事件 const listeners = vm.$options._parentListeners if (listeners) { updateComponentListeners(vm, listeners) } } let target: any // 添加事件 function add (event, fn) { target.$on(event, fn) } export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object ) { target = vm // 更新事件监听 updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm) target = undefined } export function updateListeners ( on: Object, // 绑定事件 oldOn: Object, // 旧绑定事件 add: Function, // 添加时间绑定函数 remove: Function, // 移除事件监听 createOnceHandler: Function, // 创建once监听帮助函数 vm: Component // 组件实例 ) { let name, def, cur, old, event for (name in on) { def = cur = on[name] // 当前事件处理函数 old = oldOn[name] event = normalizeEvent(name) /* istanbul ignore if */ if (__WEEX__ && isPlainObject(def)) { cur = def.handler event.params = def.params } if (isUndef(cur)) { process.env.NODE_ENV !== 'production' && warn( `Invalid handler for event "${event.name}": got ` + String(cur), vm ) } else if (isUndef(old)) { if (isUndef(cur.fns)) { cur = on[name] = createFnInvoker(cur, vm) } if (isTrue(event.once)) { cur = on[name] = createOnceHandler(event.name, cur, event.capture) } // 添加事件 add(event.name, cur, event.capture, event.passive, event.params) } else if (cur !== old) { old.fns = cur on[name] = old } } for (name in oldOn) { if (isUndef(on[name])) { event = normalizeEvent(name) remove(event.name, oldOn[name], event.capture) } } } export function eventsMixin (Vue: Class<Component>) { const hookRE = /^hook:/ // on方法定义 Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component { const vm: Component = this // 如果事件是数组,遍历并递归 if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn) } } else { // 将事件处理函数push到组件_events中 (vm._events[event] || (vm._events[event] = [])).push(fn) // optimize hook:event cost by using a boolean flag marked at registration // instead of a hash lookup if (hookRE.test(event)) { vm._hasHookEvent = true } } return vm }
以上是事件绑定相关的代码,一些主要步骤做了注释,可以看出最终事件绑定是通过$on进行的,$on 最终的绑定事件代码为: (vm._events[event] || (vm._events[event] = [])).push(fn) ,就是将事件处理函数push到_events数组中。整个事件绑定过程,以及最后事件实际push到_events中的过程都没有看到有将子元素事件绑定到父元素的相关代码。
function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index ) { if (isDef(vnode.elm) && isDef(ownerArray)) { vnode = ownerArray[index] = cloneVNode(vnode) } vnode.isRootInsert = !nested // for transition enter check if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) { return } const data = vnode.data const children = vnode.children const tag = vnode.tag if (isDef(tag)) { // 省略部分代码 // nodeOps 定义在 src\platforms\web\runtime\node-ops.js 中,主要是真正的dom操作。 vnode.elm = vnode.ns ? nodeOps.createElementNS(vnode.ns, tag) // 创建一个具有指定的命名空间URI和限定名称的元素。 : nodeOps.createElement(tag, vnode) // 其实就是document.createElement(tagName) setScope(vnode) /* istanbul ignore if */ if (__WEEX__) { // 省略部分代码 } else { createChildren(vnode, children, insertedVnodeQueue) if (isDef(data)) { invokeCreateHooks(vnode, insertedVnodeQueue) } // 插入父级元素 insert(parentElm, vnode.elm, refElm) } if (process.env.NODE_ENV !== 'production' && data && data.pre) { creatingElmInVPre-- } } // 省略部分代码 }
虚拟DOM转化成真实DOM,该过程最主要的由createElm实现,其中 nodeOps.createElement(tag, vnode) 内部通过document.createElement(tagName) 创建真正的DOM元素。虚拟dom转化成真实DOM的过程也没有看到任何事件委托的实现。虚拟dom转化成真实dom的过程没有详细些,网上已经有人分析了这个过程,可参考:https://www.jianshu.com/p/49042bd8fef4
结论:以上从模板编译成render函数,最终返回的vnode数组;到事件绑定的实现;到虚拟都转化成真实dom。三个方面,都未曾看到有任何内部自动事件委托的实现。所以个人认为:循环列表中,如果元素较多,最好还是采用事件委托。
以上是个人分析过程,如有错误,欢迎批评指正。
-
VUE v-for循环中每个item节点动态绑定不同函数的实例
2020-10-17 23:27:50今天小编就为大家分享一篇VUE v-for循环中每个item节点动态绑定不同函数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2020-10-17 02:56:50主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下 -
vue中v-for循环给标签属性赋值的方法
2020-10-17 20:40:51主要介绍了vue中v-for循环给标签属性赋值的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue 取出v-for循环中的index值实例
2020-10-16 00:43:20今天小编就为大家分享一篇vue 取出v-for循环中的index值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 同一个for循环列表,绑定不同的点击事件
2020-05-25 16:40:14同一个for循环列表,绑定不同的点击事件</h3> <div class="list" v-for="(item,index) in items" :key="index"> <p>{{item.title}}:{{item.styl}}</p> <button type="button" @click=...<template> <div> <h3>同一个for循环列表,绑定不同的点击事件</h3> <div class="list" v-for="(item,index) in items" :key="index"> <p>{{item.title}}:{{item.styl}}</p> <button type="button" @click="update(item.num)">更新</button> </div> </div> </template> <script> export default { data(){ return { items:[ { id:'001', title:'更新1', styl:'更新一内容', num:'updateone' },{ id:'002', title:'更新2', styl:'更新二内容', num:'updatetwo' } ] } }, methods:{ //更新的点击事件,传的参item.num = methodsNums update(methodsNums){ //触发这个参数的方法 this[methodsNums]() }, updateone(){ console.log('更新1'); }, updatetwo(){ console.log('更新2'); } }, } </script> <style scoped lang='less'> .list{ display: flex; justify-content: space-between; align-items:center; width: 100%; height: 200rpx; margin-bottom: 20px; padding: 0 10px; box-sizing: border-box; text-align: left; background: #fcc; p{ flex: 1; } button{ width: 44px; height: 26px; background: lightblue; bottom: 0; } } </style>
-
VUE循环列表中的item点击事件
2021-03-08 17:26:38在子组件中抛出事件,传入button特定的item属性 父组件自定义事件,然后通过switch来区分button 如上,即可给循环列表中的item添加事件,本人小白,大牛轻虐,多多交流!在子组件中抛出事件,传入button特定的item属性
父组件自定义事件,然后通过switch来区分button
如上,即可给循环列表中的item添加事件,本人小白,大牛轻虐,多多交流!
-
Vue中控制v-for循环次数的实现方法
2020-10-17 23:29:02今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020-10-14 20:18:31主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue中给v-for循环出来的元素绑定不同的事件
2020-08-20 09:26:48vue中给v-for循环出来的元素绑定不同的事件 html: <div style="padding: 0 5px;" @click="handler(item.fun)" v-for="(item, index) in iconData" :key="index"> <i class="iconfont iconHover" :class=... -
Vue实现点击显示不同图片的效果
2020-12-11 10:32:51本文实例为大家分享了Vue点击显示不同图片的具体代码,供大家参考,具体内容如 使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③:v-on:click(简写@click):点击事件 ... -
vue中v-for循环出来的元素绑定的不同事件
2019-07-05 10:40:25场景:在v-for循环出来的元素中,有时候不同的元素需要绑定包不同的元素,例如按键,按钮之类的元素,需要在循环出来的元素中循环出不同的事件。 例如下图中按不同的按钮要执行不同的指令 解决方案:利用数据中的... -
vue动态添加事件+动态触发事件方法
2022-01-29 14:54:20<body> <div id="app"> <button @[n.value]="doEvent(n.value)" v-for="(n,i) of eventList" :key="i">...script src="./vue.js"></script> <script> var app = .