精华内容
下载资源
问答
  • uni-app,vue循环不同点击事件并传值
    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 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue循环中点击选中再点击取消(单选)的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue实现循环滚动列表

    2020-10-15 04:30:21
    主要为大家详细介绍了vue实现循环滚动列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇Vue通过for循环随机生成不同的颜色或随机数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在...
  • v-for除了可以循环数组,还可以循环对象。 例子: (item,i)>{{i}}--{{item}} [removed] export default { name: HelloWorld, data () { return { obj:{ age:1, name:zs, sex:男 } }; } } [removed] ...
  • 问题由来 最近在做项目的时候遇到使用循环组件,因为模式一样...查询了网上各种资料之后,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。 解决方式 解
  • 今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue的for循环使用方法

    2020-10-17 10:23:58
    在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤,有需要的朋友们跟着学习下。
  • 今天小编就为大家分享一篇vue 解决循环引用组件报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue动态生成dom并且自动绑定事件,具有一定的参考价值,有兴趣的可以了解一下。
  • 主要介绍了在Vue 中实现循环渲染多个相同echarts图表,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 那么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节点动态绑定不同函数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
  • 主要介绍了vue中v-for循环给标签属性赋值的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue 取出v-for循环中的index值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 同一个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循环次数的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中给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点击显示不同图片的具体代码,供大家参考,具体内容如 使用Vue中的以下知识点来显示效果 ①:v-for:循环遍历数据 ②:v-bind:class={ }:绑定样式 ③:v-on:click(简写@click):点击事件 ...
  • 场景:在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 = .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,457
精华内容 32,582
关键字:

vue循环不同事件