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标签分别绑定了三个不同的方法。
  • 相关阅读:
    001.CDN概述
    006.Ceph对象存储基础使用
    005.Ceph文件系统基础使用
    002.Oracle安装部署-ASM
    001.Oracle安装部署-本地文件系统
    004.NTP多层级架设
    004.MySQL双主+Keepalived高可用
    003.MMM双主-双从读写分离部署
    001.Amoeba读写分离部署
    003.MySQL高可用主从复制新增slave
  • 原文地址:https://www.cnblogs.com/barry1102/p/8716095.html
Copyright © 2011-2022 走看看