vue的v-on如何延迟加载

Vue 的 v-on 指令是用于监听 DOM 事件并触发相应的方法的。它本身并不涉及延迟加载的问题。但是如果你想要在延迟加载后再绑定 v-on 事件，可以使用 Vue.js 提供的 $nextTick 方法。

$nextTick 会在下一次 DOM 更新循环结束之后执行延迟加载的回调函数。这样可以确保延迟加载的 DOM 元素已经被渲染出来并且可以绑定事件。

示例代码：

<template>
  <div ref="myDiv" v-if="show">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.show = true;
      this.$refs.myDiv.addEventListener('click', this.handleClick);
    })
  },
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
}
</script>

在上面的代码中，我们使用 v-if 指令控制了 DOM 元素的显示和隐藏。在 mounted 钩子函数中，我们使用 $nextTick 方法确保 DOM 元素已经被渲染出来。然后我们再绑定 click 事件并添加 handleClick 方法。