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