您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue 中v-on參數(shù)的作用是什么,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
其中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" > <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear "></div> </div>
js部分的代碼:
exchange: function (event) { alert("開始執(zhí)行方法"); var a = event.target; var cellimg = a.getElementsByTagName("div")[0]; var msg = cellimg.innerText; page2datas.todos[0].groupheader = msg; alert("方法執(zhí)行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法執(zhí)行結(jié)束"); }
這時(shí)候如果點(diǎn)擊cell中有顏色的區(qū)域(即點(diǎn)擊li標(biāo)簽的字標(biāo)簽的時(shí)候),只有第一個(gè)alert( )方法執(zhí)行,而后面的兩個(gè)方法并不執(zhí)行。
如果標(biāo)簽綁定的方法中有參數(shù)$event,這時(shí)候就可以利用event.target,獲取到當(dāng)前點(diǎn)被綁定這個(gè)點(diǎn)擊事件的標(biāo)簽。
但是這個(gè)參數(shù)也可能會(huì)造成一些問(wèn)題,比如如果想不論點(diǎn)擊li標(biāo)簽的哪一個(gè)部分都要把點(diǎn)擊事件的方法執(zhí)行完整,這時(shí)候參數(shù)event就不適用了。這時(shí)候只能另想其他辦法。
在li中有v-for循環(huán),其中有一個(gè)cell對(duì)象,這個(gè)對(duì)象居居士li標(biāo)簽中的數(shù)據(jù)。只需要把這個(gè)對(duì)象傳遞給點(diǎn)擊事件的方法,就可以通過(guò)這個(gè)對(duì)象去實(shí)現(xiàn)剛才想要達(dá)到的目的。
修改之后的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" > <div class="pagecellmsg ">{{ cell.right }}</div> </li> </ul> <div class="clear "></div> </div>
修改之后的js代碼:
exchange: function (cell) { alert("開始執(zhí)行方法"); page2datas.todos[0].groupheader =cell.left; alert("執(zhí)行中"); var b = document.getElementById("page1"); b.style.display = "none"; var c = document.getElementById("page2"); c.style.display = "block"; alert("方法執(zhí)行結(jié)束"); }
這時(shí)候,整個(gè)電擊事件的執(zhí)行方法都可以完整執(zhí)行下來(lái),后續(xù)頁(yè)面的切換也可以完成。
補(bǔ)充:Vue中關(guān)于v-on綁定點(diǎn)擊事件時(shí)候的參數(shù)問(wèn)題
v-on的綁定點(diǎn)擊事件的時(shí)候關(guān)于參數(shù)有三種情況,分別如下 :
<button @click="btnClick">點(diǎn)擊</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時(shí)event就是當(dāng)前點(diǎn)擊的對(duì)象 console.log(event) } } }) </script>
<button @click="btnClick()">點(diǎn)擊</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時(shí)event是undefined console.log(event) } } }) </script>
<button @click="btnClick(123)">點(diǎn)擊</button> <script> const app = new Vue({ methods:{ btnClick(event){ // 此時(shí)event是123 console.log(event) } } }) </script>
<!-- 這種情況下,如果需要傳遞當(dāng)前點(diǎn)擊的對(duì)象,參數(shù)必須是$event --> <!-- 第一個(gè)位置如果要傳數(shù)字的話,就不需要加引號(hào),如果要傳一個(gè)字符串的話,就必須要加引號(hào),因?yàn)槿绻患右?hào),Vue就會(huì)當(dāng)做一個(gè)變量來(lái)解析,此時(shí)如果在data中沒有定義的話,就會(huì)報(bào)錯(cuò) --> <button @click="btnClick(123,$event)">點(diǎn)擊</button> <script> const app = new Vue({ methods:{ btnClick(num,event){ // 此時(shí)num是123,event是當(dāng)前點(diǎn)擊的對(duì)象, console.log(num,event) } } }) </script>
關(guān)于vue 中v-on參數(shù)的作用是什么就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。