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

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

春风欲雨

6434人浏览 · 2019-11-29 14:57:18

春风欲雨 · 2019-11-29 14:57:18 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^