事件监听 || v-on参数
生活随笔
收集整理的這篇文章主要介紹了
事件监听 || v-on参数
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
v-on參數(shù)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--1.事件調(diào)用的方法沒有參數(shù)--><button @click="btn1Click()">按鈕1</button><button @click="btn1Click">按鈕1</button><!--2.在事件定義時(shí), 寫方法時(shí)省略了小括號(hào), 但是方法本身是需要一個(gè)參數(shù)的, 這個(gè)時(shí)候, Vue會(huì)默認(rèn)將瀏覽器生產(chǎn)的event事件對(duì)象作為參數(shù)傳入到方法--><!--<button @click="btn2Click(123)">按鈕2</button>--><!--<button @click="btn2Click()">按鈕2</button>--><button @click="btn2Click">按鈕2</button><!--3.方法定義時(shí), 我們需要event對(duì)象, 同時(shí)又需要其他參數(shù)--><!-- 在調(diào)用方式, 如何手動(dòng)的獲取到瀏覽器參數(shù)的event對(duì)象: $event--><button @click="btn3Click(abc, $event)">按鈕3</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊',abc: 123},methods: {btn1Click() {console.log("btn1Click");},btn2Click(event) {console.log('--------', event);},btn3Click(abc, event) {console.log('++++++++', abc, event);}}})// 如果函數(shù)需要參數(shù),但是沒有傳入, 那么函數(shù)的形參為undefined// function abc(name) {// console.log(name);// }//// abc() </script></body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--1. .stop修飾符的使用--><div @click="divClick">aaaaaaa<button @click.stop="btnClick">按鈕</button> // 阻止了冒泡的行為</div><!--2. .prevent修飾符的使用--><br><form action="baidu"><input type="submit" value="提交" @click.prevent="submitClick"></form><!--3. .監(jiān)聽某個(gè)鍵盤的鍵帽--><input type="text" @keyup.enter="keyUp"><!--4. .once修飾符的使用--><button @click.once="btn2Click">按鈕2</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btnClick() {console.log("btnClick");},divClick() {console.log("divClick");},submitClick() {console.log('submitClick');},keyUp() {console.log('keyUp');},btn2Click() {console.log('btn2Click');}}}) </script></body> </html>
?
總結(jié)
以上是生活随笔為你收集整理的事件监听 || v-on参数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： const的使用 || 对象增强写法
- 下一篇： v-if 和 v-else-if 和 v