vue.js中關(guān)于點擊事件方法的使用(click)
關(guān)于點擊事件方法的使用(click)
定義vue.js:
<script src="../js/vue.min.js"> </script>
也可以使用網(wǎng)上的:
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
都可以。
定義方法:
let vm=new Vue({ el:"#jincaipinlun", data:{ message:"", }, // 點擊頭像查看詳情 methods: { makereplyName: function(item){ alert(item); mui.openWindow({ id:13, url:'myself.html', extras:{ userName: item } }); }, makebeReplyName: function(item){ alert(item); mui.openWindow({ id:13, url:'myself.html', extras:{ userName: item } }); } , } });
mui頁面顯示:
<div data-am-widget="tabs" id="jincaipinlun" class="am-tabs am-tabs-default pet_comment_list_tab am-no-layout"> <div class="am-tabs-bd pet_pl_list" v-for="data in message" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <div><div class="pet_comment_list_block"> <a > <div class="pet_comment_list_block_l" v-on:click="makereplyName(data.userName)"> <img v-bind:src=data.img alt=""> </div></a> <div class="pet_comment_list_block_r"> <div class="pet_comment_list_block_r_info">{{data.replyName}}</div> <div class="pet_comment_list_block_r_text" style="vertical-align: middle;" v-html=data.content> </div> <div class="pet_comment_list_block_r_bottom"> <div class="pet_comment_list_bottom_info_l">{{data.time}}</div></div> </div></div> <div class="pet_comment_list_block" v-for="item in data.replyBody"> <a > <div class="pet_comment_list_block_l" v-on:click="makebeReplyName(item.userName)"> <img v-bind:src=item.img alt=""> </div></a> <div class="pet_comment_list_block_r"> <div class="pet_comment_list_block_r_info">{{item.replyName}}</div> <div class="pet_comment_list_block_r_text"> <span>@{{item.beReplyName}}</span><span style="color: rgb(34, 34, 34);" v-html=item.content></span> </div> <div class="pet_comment_list_block_r_bottom"> <div class="pet_comment_list_bottom_info_l">{{item.time}}</div></div> </div></div></div> </div> </div>
提出重要的方法使用為:
<div class="pet_comment_list_block_l" v-on:click="makereplyName(data.userName)"> <div class="pet_comment_list_block_l" v-on:click="makebeReplyName(item.userName)">
也就是我們提到的:
makereplyName,makebeReplyName方法。
輸出結(jié)果為:
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>
簡單分析到這里,大家也可以追一下vue的源碼進行分析。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能
這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能的相關(guān)資料,在Vue項目中,經(jīng)常用Blob二進制進行文件下載功能,需要的朋友可以參考下2023-07-07vue腳手架創(chuàng)建項目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項目時報catch錯誤及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應(yīng)該是使用v-show,本文通過實例圖文相結(jié)合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04Vue后臺管理系統(tǒng)之實現(xiàn)分頁功能示例
本文主要介紹了Vue后臺管理系統(tǒng)之實現(xiàn)分頁功能,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12