vue中使用事件代理并且获取一些参数

<template>
  <div @click="log($event)">
    <ul>
      <li v-for="(item, index) in list" :key="index" :data-val="item.value">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { label: '苹果', value: 'apple' },
        { label: '香蕉', value: 'bannana' },
        {
          label: '橙子',
          value: 'orange'
        }
      ]
    }
  },
  methods: {
    log(ev) {
      console.log(ev)
      console.log(ev.target.tagName)
      if (ev.target.tagName.toLowerCase() === 'li') {
        console.log(ev.target.dataset.val)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>

1.重点在e.target的判断
2.数据最好设定在自定义属性上。我这里使用的是dataset.标准一点而已，也可以使用别的