Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法

1.實(shí)現(xiàn)計(jì)數(shù)器功能，每點(diǎn)擊一次按鈕，count值增加一或增加二，鼠標(biāo)在cordinates行移動(dòng)時(shí)會(huì)更新當(dāng)前坐標(biāo)，通過(guò)自定義函數(shù)或者stop屬性禁止事件傳播。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了灌云免費(fèi)建站歡迎大家使用！

效果如下：

代碼如下：

<!DOCTYPE html><html><head>	
<meta charset="utf-8">	
<title>計(jì)數(shù)器自增函數(shù)</title>	
<script src="vue.js"></script></head><body> <div id="app"> 	
<button v-on:click="increase">點(diǎn)擊加一</button> 	
<!--自定義步長(zhǎng)--> 	
<button v-on:click="increase2(2,$event)">點(diǎn)擊加二</button> 	
<p>{{count}}</p> 	
<!--實(shí)現(xiàn)鼠標(biāo)在此行移動(dòng)時(shí)顯示位置坐標(biāo)--> 	
<p v-on:mousemove="updateCordinates"> 	
cordinates:({{x}}/{{y}})- 
  
<!--下面兩種方法實(shí)現(xiàn)的效果相同--> 	
<span v-on:mousemove="dummy">STOP UPDATE</span> 	
<!--這里的stop后不能加小括號(hào)--> 	
<span v-on:mousemove.stop>stop update too!</span> </p> </div> <script> 	
new Vue({ 		
el:'#app', 		
data:{ 			
count:0, 			
x:0, 			
y:0 		
}, 		
methods:{ 			
increase:function(){ 				
this.count++; 			
}, 			
increase2:function (step,event){ 				
this.count+=step; 			
}, 			
updateCordinates:function(event){ 				
this.x=event.clientX; 				
this.y=event.clientY; 			
}, 			
dummy:function(event){ 				
event.stopPropagation(); 			
} 		
} 	
}) </script></body></html>

注意：關(guān)鍵字，標(biāo)簽，括號(hào)等不能使用中文，否則也會(huì)出錯(cuò)。

以上這篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
新聞來(lái)源：http://muchs.cn/article14/ihpode.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站改版、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容