溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在Vue中實例事件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
具體如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 實例事件</title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <h2>Vue 實例事件</h2> <hr> <div id="app"> <p> {{num}} </p> <p><button @click="add">add</button></p> </div> <p><button οnclick="reduce()">reduce</button></p> <p><button οnclick="reduceonce()">reduceonce</button></p> <p><button οnclick="off()">關閉事件</button></p> </body> </html> <script> var app = new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++ } }, }) //在構造器 on 一直調用 once只能調用一次 app.$on('reduce',function(){ this.num--; console.log('執行了reduce方法') }) app.$once('reduceonce',function(){ this.num--; console.log('執行了reduceonce方法') }) function reduce(){ //emit 觸發當前實例上的事件 app.$emit('reduce'); } function reduceonce(){ app.$emit('reduceonce'); } // $off 關閉事件 function off(){ app.$off('reduce'); console.log('關閉了reduce') } </script>
運行結果：
看完上述內容，你們對怎么在Vue中實例事件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
