VUE—v-for循环动态绑定不同的函数方法(图文详情)

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

第一步:在v-for循环的data里写方法名,我这里有三个方法名
VUE—v-for循环动态绑定不同的函数方法(图文详情)_第1张图片

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

在这里插入图片描述

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

methods: {
      Fn (method) {
        this[method]()
      },
      wechatFn () {
        this.$messagebox.confirm('', '"ZCOOl站酷"想要打开"微信"')
      },
      qqFn () {
        this.$messagebox.confirm('', '"ZCOOl站酷"想要打开"QQ"')
      },
      blogFn () {
        this.$messagebox.confirm('', '"ZCOOl站酷"想要打开"微博"')
      }
    }

VUE—v-for循环动态绑定不同的函数方法(图文详情)_第2张图片
这里的this[method]就是为了赋值data里的三个函数方法,现在我每个li都分别绑定了方法
然后分别写一下这三个方法
VUE—v-for循环动态绑定不同的函数方法(图文详情)_第3张图片
这个时候已经成功绑定,而且可以执行,看一下效果
VUE—v-for循环动态绑定不同的函数方法(图文详情)_第4张图片
VUE—v-for循环动态绑定不同的函数方法(图文详情)_第5张图片
VUE—v-for循环动态绑定不同的函数方法(图文详情)_第6张图片
ok了?

你可能感兴趣的:(VUE)