Vue監(jiān)聽事件實(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),通過自定義函數(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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫法的過程詳解
這篇文章主要介紹了Vue3使用路由及配置vite.alias簡(jiǎn)化導(dǎo)入寫法,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue.js打包項(xiàng)目后頁面出現(xiàn)空白的解決辦法
這篇文章主要介紹了vue.js打包項(xiàng)目后頁面出現(xiàn)空白的解決辦法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會(huì)遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03Vue監(jiān)聽數(shù)據(jù)對(duì)象變化源碼
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)聽數(shù)據(jù)對(duì)象變化的源碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03