VUE—v-for循环动态绑定不同的函数方法

第一步:在v-for循环的data里写方法名

第二步:v-for循环时click事件绑定不同的函数方法

//这里随便用了个elementui按钮做示范 //部分参数无视
<
el-button v-for="(item, index) in allButton" :key="index" size="small" type="primary" @click="Fn(item.method)">{{item.label}}</el-button>

第三步:在methods里面写Fn这个方法用来赋值data里面的方法

//data
                allButton: [
                    {
                        label: '点击跳转到微信',
                        method: 'wechatFn'
                    },
                    {
                        label: '点击跳转到qq',
                        method: 'qqFn'
                    }
                ]
//method
      Fn(method) {
        this[method]()
      },
      wechatFn () {
        console.log('即将跳转到微信')
      },
      qqFn () {
        console.log('即将跳转到QQ')
      }

 

posted @ 2020-10-21 11:27  知识的探求者  阅读(1236)  评论(0编辑  收藏  举报