javascript - v-for如何为一个列表里的某个项单独绑定事件？

问题描述

问 题

例如，有下列代码：
我想为循环出来的第二个a标签 单独 绑定事件该如何做(例如给最后渲染出来的第二个a标签绑定事件)？
注意：不是给所有循环出来的项目都绑定事件，已经翻阅过百度，谷歌，都找不到答案

<li v-for="link in links">

<a :href="link.href" :title="link.title">{{link.info}}</a>

</li>
....
links: [{

  href:"some1.html",
  title:"1",
  info:"1"
},{
  href: "some2.html",
  title: "2",
  info: "2"
},{
  href: "some3.html",
   title: "3",
   info: "3"
  }]

解决方案

元素写两次，用 v-if/v-else
可以参考这个 jsfiddle

  <ol>
    <li v-for="(item, index) in list">
      <button v-if="index == 1" type="button" v-on:click="alert()"> <!-- 选定第二个才绑定 -->
        {{ index }}: {{ item }}
      </button>
      <button v-else type="button">
        {{ index }}: {{ item }}
      </button>
    </li>
  </ol>

const data = ["a", "b", "c", "d", "e"];

const app = new Vue({
  el: '#app',
  data: {
    list: data
  },
  methods: {
    alert() {
      alert('test');
    }
  }
});

这篇关于javascript - v-for如何为一个列表里的某个项单独绑定事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！