Vue如何实现自动触发功能
更新时间：2022年01月24日 15:17:27 作者：你丫才美工
这篇文章主要介绍了Vue如何实现自动触发功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
实现自动触发功能
今天在项目中遇到一个问题，就是当页面加载的时候，我希望某个元素通过点击事件添加样式，试了下jQuery的trigger方法，并没有任何效果，于是只能手动添加，先把功能实现，晚上回来的时候，闲着没事做便温故Vue知识点，正好听到视频中老师在讲解关于自定义指令directives属性，于是便试了下
<button @click='toggle' v-trigger>toggle</button>
directives:{
trigger:{
inserted(el,binging){
el.click()
//$(el).trigger('click')
}
}
}页面加载的时候，点击事件被执行了！
自定义指令实现自动点击事件
vue实现自动点击事件，刚进入页面即发生点击事件。
这里用的是vue的自定义指令directive，具体使用可移步到vue文档。
1.若是没有v-for循环
则直接放入directive自定义指令。
<template>
<div class="clickdown" @click="myClick()" v-clickDown>自动点击</div>
</template>
export default {
directives: {
clickDown: {
inserted(el) {
el.click()
}
}
}
}2.若是有v-for循环
需要自动点击索引第一个，则需要binding。
<template>
<div class="clickdown" @click="myClick()" v-for="(item,index) in list" :key="index" v-clickDown="index">自动点击索引第一个</div>
</template>
export default {
directives: {
clickDown: {
inserted(el,binding,index) {
if(binding.value===0){
el.click()
}
}
}
}
}好了，完美！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中element-ui不能修改el-input框,或是不能修改某些值问题
这篇文章主要介绍了vue中element-ui不能修改el-input框,或是不能修改某些值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
身为入行未深的小白前端,不断的学习是我们不可丢失的习惯,前端流行的框架也是层出不穷,vue在众多框架中脱颖而出,下面这篇文章主要给大家介绍了关于搭建一个vue项目的完整步骤,需要的朋友可以参考下2022-07-07
Vue提供自定义实现指令的功能, 和组件类似,可以是全局指令和局部指令,这篇文章主要介绍了vue自定义tap指令及tap事件的实现 ,需要的朋友可以参考下2018-09-09
router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,本文主要为大家详细介绍了router-view具体使用,希望对大家有所帮助2023-12-12
ElementUI中el-dropdown-item点击事件无效问题
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，这篇文章主要介绍了Vue-cli3中使用TS语法示例代码,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue高德地图，带你玩转周边，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下2019-04-04
本文主要介绍了vue中使用h5 video标签实现弹窗播放本地视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论