前言

在 v-for 循環(huán)語句上，定義一個(gè)點(diǎn)擊事件 傳入兩個(gè)參數(shù)（當(dāng)行數(shù)據(jù)、當(dāng)前事件對(duì)象），如下代碼片段，當(dāng)前事件對(duì)象必須加上 ‘$’ 符號(hào)

<template> <div> <ul> <li v-for='(item, index) in arrData' :key='index' @click='operate(item, $event)' > {{ item.title }} </li> </ul> </div></template><script>export default { data() { return { arrData: [ { id: 1, title: ’第一條數(shù)據(jù)’ }, { id: 2, title: ’第二條數(shù)據(jù)’ } ] }; }, methods: { operate(item, event) { console.log(item); console.log(event); } }};</script>

不加’$‘報(bào)錯(cuò)：

加上’$‘: 點(diǎn)擊行之后獲得當(dāng)前行數(shù)據(jù) 以及當(dāng)前事件對(duì)象

如果本篇文章對(duì)你有幫助的話，很高興能夠幫助上你。

補(bǔ)充知識(shí)：vue獲取當(dāng)前點(diǎn)擊對(duì)象的下標(biāo)，和當(dāng)前點(diǎn)擊對(duì)象的內(nèi)容

如下所示：

<li v-for='(item,index) in tabList' v-on:click='addClass(index,$event)' >{{item.title}}</li>

data里面聲明：

data() { return { tabList: [ { id: 0, title: '首頁1' }, { id: 1, title: '首頁2' }, { id: 2, title: '首頁3' } ], current:0 }; },

methods: { addClass: function(index,event) { this.current = index; //獲取點(diǎn)擊對(duì)象 var el = event.currentTarget; console.log('當(dāng)前對(duì)象的內(nèi)容：'+el.innerHTML); console.log(this.current) }

以上這篇vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。