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中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧2018-10-10
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2022-12-12
这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端，本文给大家分享Vue使用sign-canvas实现在线手写签名，感兴趣的朋友一起看看吧2022-05-05
这篇文章主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了vue从使用到源码实现的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
element-plus 在vue3 中不生效的原因解决方法(element-plus引入)
这篇文章主要介绍了element-plus 在vue3 中不生效的原因解决方法(element-plus引入),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了Vue中如何使用video.js实现截图和视频录制与下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
本篇文章主要介绍了详解Vue整合axios的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论