Vue如何实现自动触发功能

目录

• 实现自动触发功能
• 自定义指令实现自动点击事件
• 1.若是没有v-for循环
• 2.若是有v-for循环

实现自动触发功能

今天在项目中遇到一个问题，就是当页面加载的时候，我希望某个元素通过点击事件添加样式，试了下jQuery的trigger方法，并没有任何效果，于是只能手动添加，先把功能实现，晚上回来的时候，闲着没事做便温故Vue知识点，正好听到视频中老师在讲解关于自定义指令directives属性，于是便试了下

toggle

directives:{
    trigger:{
     inserted(el,binging){
        el.click()
       //$(el).trigger('click')
      }
   }
}

页面加载的时候，点击事件被执行了！

自定义指令实现自动点击事件

vue实现自动点击事件，刚进入页面即发生点击事件。

这里用的是vue的自定义指令directive，具体使用可移步到vue文档。

1.若是没有v-for循环

则直接放入directive自定义指令。

export default {
 directives: {
            clickDown: {
                inserted(el) {
                        el.click()
                }
            }
        }
}

2.若是有v-for循环

需要自动点击索引第一个，则需要binding。

export default {
 directives: {
            clickDown: {
                inserted(el,binding,index) {
                    if(binding.value===0){
                        el.click()
                    }
                }
            }
        }
}

好了，完美！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。