日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 Vue 正文

Vue手動控制點擊事件Click觸發(fā)方式_vue.js

作者：梅長弓 ? 更新時間： 2022-04-06 Vue

手動控制點擊事件Click觸發(fā)

方法一

變量的值&&觸發(fā)函數(shù)

在這里插入圖片描述

方法二

利用變量控制css樣式設(shè)置其pointer-event:none

在這里插入圖片描述

Vue點擊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點擊事件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 () { ? ? ?//點擊事件的時候去尋找相應(yīng)的方法，在底層做轉(zhuǎn)換直接寫方法名，大括號里面寫相應(yīng)的業(yè)務(wù)邏輯
? ? ? ? ? ? ? ? console.log('11');
? ? ? ? ? ? },
?//也可以采用匿名函數(shù)的寫法定義方法名，然后進行調(diào)用這種方法也是可以的，只不過getMethod ()的寫法更加簡潔，但是在實際開發(fā)當(dāng)中這個可是不支持的例如 ? aaFunc (){} ? ? ? ? //直接這樣寫是會報錯的，一定要注意;
? ? ? ? ? ? getMethodFun: function () { ??
? ? ? ? ? ? ? ? console.log('22')
? ? ? ? ? ? }
? ? ? ? },
? ? });
</script>
</html>

原文鏈接：https://blog.csdn.net/qq_41260655/article/details/121122980

欄目分類
最近更新