聊聊vue 中的v-on參數(shù)問題

更新時(shí)間：2021年01月29日 09:49:12 作者：Firoly

這篇文章主要介紹了聊聊vue 中的v-on參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

vue中v-on:clock的使用

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

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

其中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("開始執(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ì)造成一些問題，比如如果想不論點(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)擊事件的方法，就可以通過這個(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" 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("開始執(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í)行下來，后續(xù)頁面的切換也可以完成。

補(bǔ)充：Vue中關(guān)于v-on綁定點(diǎn)擊事件時(shí)候的參數(shù)問題

v-on的綁定點(diǎn)擊事件的時(shí)候關(guān)于參數(shù)有三種情況，分別如下：

綁定的方法后面沒有括號(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ù)字的話,就不需要加引號(hào),如果要傳一個(gè)字符串的話,就必須要加引號(hào),因?yàn)槿绻患右?hào),Vue就會(huì)當(dāng)做一個(gè)變量來解析,此時(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>

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

您可能感興趣的文章: