聊聊vue 中的v-on引數問題
阿新 • • 發佈:2021-02-01
vue中v-on:clock的使用
最近在學習vue.js框架。記下其中遇到的一些問題,以便以後查閱。
首先,這是一個頁面(為了便於觀察,將各個標籤都一一著色):
其中html程式碼:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;"> <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear "></div> </div>
js部分的程式碼:
exchange: function (event) { alert("開始執行方法"); var a = event.target; var cellimg = a.getElementsByTagName("div")[0]; var msg = cellimg.innerText; page2datas.todos[0].groupheader = msg; alert("方法執行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法執行結束"); }
這時候如果點選cell中有顏色的區域(即點選li標籤的字標籤的時候),只有第一個alert( )方法執行,而後面的兩個方法並不執行。
原因就是這個方法的引數event:
如果標籤繫結的方法中有引數$event,這時候就可以利用event.target,獲取到當前點被繫結這個點選事件的標籤。
但是這個引數也可能會造成一些問題,比如如果想不論點選li標籤的哪一個部分都要把點選事件的方法執行完整,這時候引數event就不適用了。這時候只能另想其他辦法。
解決方法:
在li中有v-for迴圈,其中有一個cell物件,這個物件居居士li標籤中的資料。只需要把這個物件傳遞給點選事件的方法,就可以通過這個物件去實現剛才想要達到的目的。
修改之後的html程式碼:
<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)"> <div class="pagecelltext ">{{ cell.left }}</div> <div class="pagecellmin">{{ cell.min }}</div> <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;"> <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear "></div> </div>
修改之後的js程式碼:
exchange: function (cell) { alert("開始執行方法"); page2datas.todos[0].groupheader =cell.left; alert("執行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法執行結束"); }
這時候,整個電擊事件的執行方法都可以完整執行下來,後續頁面的切換也可以完成。
補充:Vue中關於v-on繫結點選事件時候的引數問題
v-on的繫結點選事件的時候關於引數有三種情況,分別如下 :
繫結的方法後面沒有括號
<button @click="btnClick">點選</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時event就是當前點選的物件 console.log(event) } } }) </script>
繫結的方法後面有括號
<button @click="btnClick()">點選</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時event是undefined console.log(event) } } }) </script>
繫結的方法後面有括號,需要傳遞引數
<button @click="btnClick(123)">點選</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時event是123 console.log(event) } } }) </script>
繫結的方法後面有括號,需要傳遞引數,並且需要當前點選的物件
<!-- 這種情況下,如果需要傳遞當前點選的物件,引數必須是$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>
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援我們。如有錯誤或未考慮完全的地方,望不吝賜教。