zoukankan      html  css  js  c++  java
  • 在vue项目中,通过v-for循环,动态添加后台返回的事件

    一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路:

      1.假定后台返回数据为如下格式:    

    list: [
    {
    name: '李寻欢',
    kungFu: '小李飞刀',
    method: "foo('林诗音')"
    }, {
    name: '楚留香',
    kungFu: '踏雪无痕',
    method: "foo1('夜姬')"
    }, {
    name: '陆小凤',
    kungFu: '灵犀一指',
    method: "foo2('花满楼')"
    }
    ]
    2.需要先对这个数组进行一下处理
    this.list.map(item => {
    const reg1 = /^w+/g;
    const reg2 = /(([^)]+))/
    item.fn = item.method.match(reg1)[0]
    item.args = item.method.match(reg2)[1]
    }),该部操作是将一个字符串的方法,类似于"foo('bar')",解析成:foo函数名和bar参数;
    3.HTML文本中为如下代码:
    <ul v-for="item,index in list">
    <li @click="callFn(item)">{{item.name}}</li>
    </ul>,绑定方法为callFn(item),在methods中定义如下:
    callFn(item) {
    this[item.fn].apply(this, item.args.split(','));
    },这样就可以将后台返回的方法在callFn中进行调用;
    4.假设后台方法为:
    foo(arg) {
    console.log('==========', arg);
    },
    foo1(arg) {
    console.log('++++++++++', arg);
    },
    foo2(arg) {
    console.log('>>>>>>>>>>', arg);
    },则前端渲染渲染的三个li标签分别绑定了三个不同的方法。
  • 相关阅读:
    第一次冲刺04
    第一次冲刺03
    第一次冲刺02
    团队站立会议3(第二阶段)
    团队站立会议2(第二阶段)
    团队站立会议1(第二阶段)
    Alpha版总结会议
    “来用”alpha版使用说明书
    团队绩效评估计划
    第一阶段其他团队对我们的意见汇总
  • 原文地址:https://www.cnblogs.com/barry1102/p/8716095.html
Copyright © 2011-2022 走看看