Vue中關於v-on綁定點擊事件時候的參數問題

  • v-on的綁定點擊事件的時候關於參數有三種情況,分別如下 :
    1. 綁定的方法後面沒有括號
       <button @click="btnClick">點擊</button>
       <script>
       	const app = new Vue({
       		methods:{
       			btnClick(event){
       			// 此時event就是當前點擊的對象
       				console.log(event)
       			}
       		}
       	})
       </script>
      
      在這裏插入圖片描述
    2. 綁定的方法後面有括號
      <button @click="btnClick()">點擊</button>
      <script>
      	const app = new Vue({
      		methods:{
      			btnClick(event){
      			// 此時event是undefined
      				console.log(event)
      			}
      		}
      	})
      </script>
      
      在這裏插入圖片描述
    3. 綁定的方法後面有括號,需要傳遞參數
      <button @click="btnClick(123)">點擊</button>
      <script>
      	const app = new Vue({
      		methods:{
      			btnClick(event){
      			// 此時event是123
      				console.log(event)
      			}
      		}
      	})
      </script>
      
    4. 綁定的方法後面有括號,需要傳遞參數,並且需要當前點擊的對象
      <!-- 這種情況下,如果需要傳遞當前點擊的對象,參數必須是$event -->
      <!-- 第一個位置如果要傳數字的話,就不需要加引號,如果要傳一個字符串的話,就必須要加引號,因爲如果不加引號,Vue就會當做一個變量來解析,此時如果在data中沒有定義的話,就會報錯 -->
      <button @click="btnClick(123,$event)">點擊</button>
      <script>
      	const app = new Vue({
      		methods:{
      			btnClick(num,event){
      			// 此時num是123,event是當前點擊的對象,
      				console.log(num,event)
      			}
      		}
      	})
      </script>
      
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章