vue事件代理

Posted 2021-06-04 吴小明

点击li打印它的index

    <ul>
      <li v-for="(item,index) in list" :key="index" @click="handleClick(index)">{{item}}</li>
    </ul>

    handleClick(index) {
      console.log(index)
    }

事件代理的方式：

给父元素绑定点击事件，给当前元素绑定自定义属性，属性值为下标

    <ul @click="handleClick">
      <li v-for="(item,index) in list" :key="index" :my-index=\'index\'>{{item}}</li>
    </ul>

通过e.target.getAttribute()可以获取自定义的标签属性

    handleClick(e) {
      const index = +e.target.getAttribute(\'my-index\')
      console.log(index)
    }