如何在vue项目中给ul>li列表使用事件委托

最新推荐文章于 2024-04-19 18:32:11 发布

春风欲雨

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量6.3k

点赞数 6

分类专栏：前端小知识点 vue 文章标签：事件委托

本文链接：https://blog.csdn.net/WebDestiny/article/details/103310615

版权

前端小知识点同时被 2 个专栏收录

69 篇文章 1 订阅

订阅专栏

vue

31 篇文章 1 订阅

订阅专栏

ul>
    <li v-for="(item, index) in data" @click="handleClick(index)">
        Click Me
    </li>
</ul>

然后这样的话，结果就是所有的li元素都绑定了事件。

我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好的解决这个性能问题，我们在这里要引入一个事件委托（又叫事件代理）的概念。即子不教父子过，子债父偿......

我们可以通过在li元素中额外加一个data-index就可以实现委托啦~

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    let component = {
      template: `
        <ul @click="handleClick">
          <li v-for="(item, index) in data" :data-index="index">
            {{ item.text }}
          </li>
        </ul>
      `,
      data() {
        return {
          data: [
            {
              id: 0,
              text: '0',
            },
            {
              id: 1,
              text: '1',
            },
            {
              id: 2,
              text: '2',
            }
          ]
        }
      },
      methods: {
        handleClick(e) {
          // 注意一定要过滤掉ul，不然会出问题
          if (e.target.nodeName.toLowerCase() === 'li') {
            const index = parseInt(e.target.dataset.index)
            // 获得引索后，只需要修改data数据就能改变UI了
            this.doSomething(index)
          }
        },
        doSomething(index) {
          // do what you want
          alert(index)
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        'my-component': component
      }
    })
  </script>
</body>

春风欲雨

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
如何在vue项目中给ul>li列表使用事件委托

ul> <li v-for="(item, index) in data" @click="handleClick(index)"> Click Me </li></ul>然后这样的话，结果就是所有的li元素都绑定了事件。我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好...
复制链接

扫一扫