Vue如何實現(xiàn)自動觸發(fā)功能
更新時間：2022年01月24日 15:17:27 作者：你丫才美工
這篇文章主要介紹了Vue如何實現(xiàn)自動觸發(fā)功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
實現(xiàn)自動觸發(fā)功能
今天在項目中遇到一個問題，就是當頁面加載的時候，我希望某個元素通過點擊事件添加樣式，試了下jQuery的trigger方法，并沒有任何效果，于是只能手動添加，先把功能實現(xiàn)，晚上回來的時候，閑著沒事做便溫故Vue知識點，正好聽到視頻中老師在講解關于自定義指令directives屬性，于是便試了下
<button @click='toggle' v-trigger>toggle</button>
directives:{
? ? trigger:{
? ? ?inserted(el,binging){
? ? ? ? el.click()
? ? ? ?//$(el).trigger('click')
? ? ? }
? ?}
}頁面加載的時候，點擊事件被執(zhí)行了！
自定義指令實現(xiàn)自動點擊事件
vue實現(xiàn)自動點擊事件，剛進入頁面即發(fā)生點擊事件。
這里用的是vue的自定義指令directive，具體使用可移步到vue文檔。
1.若是沒有v-for循環(huán)
則直接放入directive自定義指令。
<template>
<div class="clickdown" @click="myClick()" v-clickDown>自動點擊</div>
</template>
export default {
?directives: {
? ? ? ? ? ? clickDown: {
? ? ? ? ? ? ? ? inserted(el) {
? ? ? ? ? ? ? ? ? ? ? ? el.click()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
}2.若是有v-for循環(huán)
需要自動點擊索引第一個，則需要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()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
}好了，完美！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
vue中v-if 和v-else-if在頁面加載的時候，不滿足條件的標簽會加載然后再消失掉，如果要解決這個問題，下面小編給大家?guī)砹藢嵗a，需要的朋友參考下吧2018-10-10
Vue中computed和watch的區(qū)別小結(jié)
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2022-12-12
vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的方法
這篇文章主要給大家介紹了關于vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue使用sign-canvas實現(xiàn)在線手寫簽名的實例
sign-canvas?一個基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動端，本文給大家分享Vue使用sign-canvas實現(xiàn)在線手寫簽名，感興趣的朋友一起看看吧2022-05-05
這篇文章主要介紹了自定義Vue組件打包、發(fā)布到npm及使用教程 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了vue從使用到源碼實現(xiàn)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue中使用video.js實現(xiàn)截圖和視頻錄制與下載
這篇文章主要為大家詳細介紹了Vue中如何使用video.js實現(xiàn)截圖和視頻錄制與下載,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
本篇文章主要介紹了詳解Vue整合axios的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06