您好,登錄后才能下訂單哦!
1.實(shí)現(xiàn)計(jì)數(shù)器功能,每點(diǎn)擊一次按鈕,count值增加一或增加二,鼠標(biāo)在cordinates行移動(dòng)時(shí)會(huì)更新當(dāng)前坐標(biāo),通過自定義函數(shù)或者stop屬性禁止事件傳播。
效果如下:
代碼如下:
<!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)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。