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屬性禁止事件傳播。
效果如下：
代碼如下：
<!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)文章
這篇文章主要介紹了解決vue?eslint開發(fā)嚴格模式警告錯誤的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vben Admin 多標簽頁狀態(tài)管理源碼學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了在pycharm中開發(fā)vue的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
Vue后臺管理系統(tǒng)權(quán)限控制與動態(tài)路由的實現(xiàn)
本文主要介紹了Vue后臺管理系統(tǒng)權(quán)限控制與動態(tài)路由的實現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權(quán)限,提高系統(tǒng)的安全性和用戶體驗,感興趣的可以了解一下2025-04-04
Electron自動更新失效報錯Error:?Object?has?been?destroyed的問題解決
本文主要講解如何解決?Error:?Object?has?been?destroyed?這個?Electron?中最常見的問題,以及?Electron?自動更新的流程,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-01-01
今天小編就為大家分享一篇Vue退出登錄時清空緩存的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue與Nuxt的區(qū)別及使用說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05