Vue手動控制點(diǎn)擊事件Click觸發(fā)方式
更新時間：2022年01月25日 08:44:05 作者：梅長弓
這篇文章主要介紹了Vue手動控制點(diǎn)擊事件Click觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
手動控制點(diǎn)擊事件Click觸發(fā)
方法一
變量的值&&觸發(fā)函數(shù)
方法二
利用變量控制css樣式設(shè)置其pointer-event:none
Vue點(diǎn)擊click事件解析
Vue算是前端技術(shù)比較火的一門技術(shù)了，所以在日常開發(fā)當(dāng)中掌握它還是比較重要的，最近要用vue做一個移動端項目，趁著空閑的時間來簡單的寫一下demo，希望能夠幫到大家：
廢話不多說，先上代碼
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <!--<script src="./vue.js"></script>-->
? ? <script src="2.5.20-vue.js"></script>
</head>
<body>
<div id="app">
? ? ?//@click點(diǎn)擊事件getMethod和getMethod()帶不帶小括號其實沒多大的區(qū)別，vue在底層會把傳過去的函數(shù)統(tǒng)一解析成為方法，帶小括號說明有相應(yīng)的實參傳入方法體里面；
? ? <!--<p ? @click="getMethod">aaaa</p>--> ? ? ??
? ? <!--<p ? @click="getMethodFun">aaaa</p>-->
? ? <p ? @click="getMethod()">aaaa</p>
? ? <p ? @click="getMethodFun()">bbbb</p>
</div>
</body>
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: function () {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? message: 'father',
? ? ? ? ? ? ? ? show: true
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? getMethod () { ? ? ?//點(diǎn)擊事件的時候去尋找相應(yīng)的方法，在底層做轉(zhuǎn)換直接寫方法名，大括號里面寫相應(yīng)的業(yè)務(wù)邏輯
? ? ? ? ? ? ? ? console.log('11');
? ? ? ? ? ? },
?//也可以采用匿名函數(shù)的寫法定義方法名，然后進(jìn)行調(diào)用這種方法也是可以的，只不過getMethod ()的寫法更加簡潔，但是在實際開發(fā)當(dāng)中這個可是不支持的例如 ? aaFunc (){} ? ? ? ? //直接這樣寫是會報錯的，一定要注意;
? ? ? ? ? ? getMethodFun: function () { ??
? ? ? ? ? ? ? ? console.log('22')
? ? ? ? ? ? }
? ? ? ? },
? ? });
</script>
</html>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue element el-table-column中對日期進(jìn)行格式化方式(全局過濾器)
這篇文章主要介紹了Vue element el-table-column中對日期進(jìn)行格式化方式(全局過濾器)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3封裝實現(xiàn)一個圖片查看器,可以點(diǎn)擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下2025-02-02
Vue.js中computed屬性高效的數(shù)據(jù)處理案例
computed是Vue中一個計算屬性,它可以根據(jù)依賴的數(shù)據(jù)動態(tài)計算出一個新的值,并將其緩存起來,這篇文章主要給大家介紹了關(guān)于Vue.js中computed屬性高效的數(shù)據(jù)處理的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在本篇文章里小編給大家整理的是關(guān)于vue把輸入框的內(nèi)容添加到頁面的實例以及相關(guān)知識點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-11-11
Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中如何實現(xiàn)復(fù)制內(nèi)容到剪切板詳解
有些業(yè)務(wù)需求需要點(diǎn)擊按鈕復(fù)制鏈接,下面這篇文章主要給大家介紹了關(guān)于vue中如何實現(xiàn)復(fù)制內(nèi)容到剪切板的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue+echarts實現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧2023-10-10