vue获取当前点击对象的下标，和当前点击对象的内容

最新推荐文章于 2024-03-25 20:26:08 发布

原创最新推荐文章于 2024-03-25 20:26:08 发布 · 1.5w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#VUE

VUE 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在 Vue.js 中使用 v-for 指令遍历列表，并为列表项添加点击事件，同时展示如何通过事件处理函数访问被点击元素及更新数据状态。

<li v-for="(item,index)  in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>

data里面声明：

data() {
    return {
      tabList: [
        { id: 0, title: "首页1" },
        { id: 1, title: "首页2" },
        { id: 2, title: "首页3" }
      ],
      current:0
    };
  },

  methods: {
    addClass: function(index,event) {
      this.current = index;
      //获取点击对象      
      var el = event.currentTarget;
      console.log("当前对象的内容："+el.innerHTML);
      console.log(this.current)
    }