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

第一步:在v-for循环的data里写方法名,我这里有三个方法名
在这里插入图片描述

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

<ul>
          <li v-for="(item, index) in datafieldset" @click="Fn(item.method)">
            <img :src="item.pic" alt="">
          </li>
</ul>

在这里插入图片描述

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

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

在这里插入图片描述
这里的this[method]就是为了赋值data里的三个函数方法,现在我每个li都分别绑定了方法
然后分别写一下这三个方法
在这里插入图片描述
这个时候已经成功绑定,而且可以执行,看一下效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
ok了?

Logo

前往低代码交流专区

更多推荐