<block v-for="(item, index) in data_list">
	<div v-on:click='changeType(item)' class="ci ">
		<div class="cib" formType="submit" style='padding:15rpx 0 0 0;'>
			<div style='color: #1baf1b;' id="item">{{item.productName}}</div>
			<div style='color: #1baf1b;' id="item">售價(jià):{{item.productPrice/100}}元</div>
		</div>
	</div>
</block>

 changeType: function(event) { 
 	console.log(event); 
 	console.log(event.productId); 
 }

打印結(jié)果。//取到的數(shù)據(jù)是數(shù)組循環(huán)渲染出來(lái)當(dāng)前點(diǎn)擊的下標(biāo)對(duì)象

click事件獲取當(dāng)前元素屬性

Vue可以傳遞$event對(duì)象

<body id="app">
? <ul>
? ? <li @click="say('hello!', $event)">點(diǎn)擊當(dāng)前行文本</li>
? ? <li>li2</li>
? ? <li>li3</li>
? </ul>
? <script>
? ?new Vue({
? ? ? ?el: '#app',
? ? ? ?data: {
? ? ? ? message: 'Hello Vue.js!'
? ? ? ?},
? ? ? ?methods: {
? ? ? ? say: function(msg, event) {
? ? ? ? ? ?//獲取點(diǎn)擊對(duì)象 ? ? ?
? ? ? ? ? ?var el = event.currentTarget;
? ? ? ? ? ?alert("當(dāng)前對(duì)象的內(nèi)容："+el.innerHTML);
? ? ? ? }
? ? }
? ?})
? </script>
?</body>

currentTarget：currentTarget 事件屬性返回其監(jiān)聽(tīng)器觸發(fā)事件的節(jié)點(diǎn)，即當(dāng)前處理該事件的元素、文檔或窗口。

通俗一點(diǎn)說(shuō)，就是你的點(diǎn)擊事件綁定在哪一個(gè)元素上，currentTarget獲取到的就是哪一個(gè)元素。

Event對(duì)象的一些兼容性寫法

//獲得event對(duì)象兼容性寫法
event || (event = window.event);
//獲得target兼容型寫法
event.target||event.srcElement
//阻止瀏覽器默認(rèn)行為兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
//阻止冒泡寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vite?vue3多頁(yè)面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁(yè)面應(yīng)用,不同于傳統(tǒng)單頁(yè)面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁(yè)面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下
2022-05-05
vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼兩則
這篇文章主要介紹了Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼,需要的朋友可以參考下
2020-05-05
vue-Split實(shí)現(xiàn)面板分割
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue Prop屬性功能與用法實(shí)例詳解
這篇文章主要介紹了Vue Prop屬性功能與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js中Prop屬性的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-02-02
詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解Vue中$refs和$nextTick的使用方法
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-03-03
elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無(wú)法賦值且不報(bào)錯(cuò)解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
基于Vue3文件拖拽上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個(gè)文件/文件夾，代碼很簡(jiǎn)單，對(duì)vue3拖拽上傳功能感興趣的朋友一起看看吧
2022-10-10