vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)

更新時(shí)間：2022年08月02日 15:39:39 作者：你的美，讓我癡迷

這篇文章主要介紹了vue.js中關(guān)于點(diǎn)擊事件方法的使用(click)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)于點(diǎ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:"",
			  },
			  // 點(diǎn)擊頭像查看詳情
			  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頁(yè)面顯示：

  <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點(diǎn)擊click事件解析

vue算是前端技術(shù)比較火的一門(mén)技術(shù)了，所以在日常開(kāi)發(fā)當(dāng)中掌握它還是比較重要的，最近要用vue做一個(gè)移動(dòng)端項(xiàng)目，趁著空閑的時(shí)間來(lái)簡(jiǎn)單的寫(xiě)一下demo：

廢話不多說(shuō)，先上代碼：

<!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()帶不帶小括號(hào)其實(shí)沒(méi)多大的區(qū)別，vue在底層會(huì)把傳過(guò)去的函數(shù)統(tǒng)一解析成為方法，帶小括號(hào)說(shuō)明有相應(yīng)的實(shí)參傳入方法體里面；
? ? <!--<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)擊事件的時(shí)候去尋找相應(yīng)的方法，在底層做轉(zhuǎn)換直接寫(xiě)方法名，大括號(hào)里面寫(xiě)相應(yīng)的業(yè)務(wù)邏輯
? ? ? ? ? ? ? ? console.log('11');
? ? ? ? ? ? },
?//也可以采用匿名函數(shù)的寫(xiě)法定義方法名，然后進(jìn)行調(diào)用這種方法也是可以的，只不過(guò)getMethod ()的寫(xiě)法更加簡(jiǎn)潔，但是在實(shí)際開(kāi)發(fā)當(dāng)中這個(gè)可是不支持的例如 ? aaFunc (){} ? ? ? ? //直接這樣寫(xiě)是會(huì)報(bào)錯(cuò)的，一定要注意;
? ? ? ? ? ? getMethodFun: function () { ??
? ? ? ? ? ? ? ? console.log('22')
? ? ? ? ? ? }
? ? ? ? },
? ? });
</script>
</html>

簡(jiǎn)單分析到這里，大家也可以追一下vue的源碼進(jìn)行分析。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: