vue中v-on:clock的使用

最近在學(xué)習(xí)vue.js框架。記下其中遇到的一些問(wèn)題，以便以后查閱。

首先，這是一個(gè)頁(yè)面(為了便于觀(guān)察，將各個(gè)標(biāo)簽都一一著色)：

其中html代碼：

<div class='groupbody '> <ul class='list '> <li v-for='cell in todo.groupbody ' v-on:click='exchange($event)'> <div class='pagecelltext '>{{ cell.left }}</div> <div class='pagecellmin'>{{ cell.min }}</div> <img src='http://www.intensediesel.com/bcjs/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('開(kāi)始執(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í)行。

原因就是這個(gè)方法的參數(shù)event：

如果標(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 ' v-on:click='exchange(cell)'> <div class='pagecelltext '>{{ cell.left }}</div> <div class='pagecellmin'>{{ cell.min }}</div> <img src='http://www.intensediesel.com/bcjs/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('開(kāi)始執(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ù)有三種情況，分別如下 ：

綁定的方法后面沒(méi)有括號(hào)

<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>

綁定的方法后面有括號(hào)

<button @click='btnClick()'>點(diǎn)擊</button><script> const app = new Vue({ methods:{ btnClick(event){ // 此時(shí)event是undefined console.log(event) } } })</script>

綁定的方法后面有括號(hào),需要傳遞參數(shù)

<button @click='btnClick(123)'>點(diǎn)擊</button><script> const app = new Vue({ methods:{ btnClick(event){ // 此時(shí)event是123 console.log(event) } } })</script>綁定的方法后面有括號(hào),需要傳遞參數(shù),并且需要當(dāng)前點(diǎn)擊的對(duì)象

<!-- 這種情況下,如果需要傳遞當(dāng)前點(diǎn)擊的對(duì)象,參數(shù)必須是$event --><!-- 第一個(gè)位置如果要傳數(shù)字的話(huà),就不需要加引號(hào),如果要傳一個(gè)字符串的話(huà),就必須要加引號(hào),因?yàn)槿绻患右?hào),Vue就會(huì)當(dāng)做一個(gè)變量來(lái)解析,此時(shí)如果在data中沒(méi)有定義的話(huà),就會(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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。