溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.實現計數器功能，每點擊一次按鈕，count值增加一或增加二，鼠標在cordinates行移動時會更新當前坐標，通過自定義函數或者stop屬性禁止事件傳播。
效果如下：
代碼如下：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>計數器自增函數</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>
<!--實現鼠標在此行移動時顯示位置坐標-->
<p v-on:mousemove="updateCordinates">
cordinates:({{x}}/{{y}})-
<!--下面兩種方法實現的效果相同-->
<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>
注意：關鍵字，標簽，括號等不能使用中文，否則也會出錯。
以上這篇Vue監聽事件實現計數點擊依次增加的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
