欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue監(jiān)聽事件實現(xiàn)計數(shù)點擊依次增加的方法

 更新時間：2018年09月26日 08:44:27   作者：朦朧星海  
今天小編就為大家分享一篇Vue監(jiān)聽事件實現(xiàn)計數(shù)點擊依次增加的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

效果如下：

Vue計數(shù)點擊依次增加

代碼如下：

<!DOCTYPE html><html><head>	
<meta charset="utf-8">	
<title>計數(shù)器自增函數(shù)</title>	
<script src="vue.js"></script></head><body> <div id="app"> 	
<button v-on:click="increase">點擊加一</button> 	
<!--自定義步長--> 	
<button v-on:click="increase2(2,$event)">點擊加二</button> 	
<p>{{count}}</p> 	
<!--實現(xiàn)鼠標在此行移動時顯示位置坐標--> 	
<p v-on:mousemove="updateCordinates"> 	
cordinates:({{x}}/{{y}})- 
  
<!--下面兩種方法實現(xiàn)的效果相同--> 	
<span v-on:mousemove="dummy">STOP UPDATE</span> 	
<!--這里的stop后不能加小括號--> 	
<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)鍵字，標簽，括號等不能使用中文，否則也會出錯。

以上這篇Vue監(jiān)聽事件實現(xiàn)計數(shù)點擊依次增加的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論