vue.js中關于點擊事件方法的使用(click)

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

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

關于點擊事件方法的使用(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方法。

輸出結果為：

vue點擊click事件解析

vue算是前端技術比較火的一門技術了，所以在日常開發(fā)當中掌握它還是比較重要的，最近要用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)一解析成為方法，帶小括號說明有相應的實參傳入方法體里面；
? ? <!--<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è)務邏輯
? ? ? ? ? ? ? ? console.log('11');
? ? ? ? ? ? },
?//也可以采用匿名函數(shù)的寫法定義方法名，然后進行調用這種方法也是可以的，只不過getMethod ()的寫法更加簡潔，但是在實際開發(fā)當中這個可是不支持的例如 ? aaFunc (){} ? ? ? ? //直接這樣寫是會報錯的，一定要注意;
? ? ? ? ? ? getMethodFun: function () { ??
? ? ? ? ? ? ? ? console.log('22')
? ? ? ? ? ? }
? ? ? ? },
? ? });
</script>
</html>

簡單分析到這里，大家也可以追一下vue的源碼進行分析。

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

您可能感興趣的文章: