Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
更新時(shí)間：2018年09月26日 08:44:27 作者：朦朧星海
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1.實(shí)現(xiàn)計(jì)數(shù)器功能，每點(diǎn)擊一次按鈕，count值增加一或增加二，鼠標(biāo)在cordinates行移動(dòng)時(shí)會(huì)更新當(dāng)前坐標(biāo)，通過(guò)自定義函數(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)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁(yè)狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了在pycharm中開(kāi)發(fā)vue的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說(shuō)說(shuō)vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問(wèn)題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn)
本文主要介紹了Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn),可以根據(jù)用戶的角色靈活控制頁(yè)面訪問(wèn)權(quán)限,提高系統(tǒng)的安全性和用戶體驗(yàn),感興趣的可以了解一下2025-04-04
Electron自動(dòng)更新失效報(bào)錯(cuò)Error:?Object?has?been?destroyed的問(wèn)題解決
本文主要講解如何解決?Error:?Object?has?been?destroyed?這個(gè)?Electron?中最常見(jiàn)的問(wèn)題,以及?Electron?自動(dòng)更新的流程,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vue與Nuxt的區(qū)別及使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05