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

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了?