<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">售價:{{item.productPrice/100}}元</div>
		</div>
	</div>
</block>

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

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

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

Vue可以傳遞$event對象

<body id="app">
? <ul>
? ? <li @click="say('hello!', $event)">點擊當(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) {
? ? ? ? ? ?//獲取點擊對象 ? ? ?
? ? ? ? ? ?var el = event.currentTarget;
? ? ? ? ? ?alert("當(dāng)前對象的內(nèi)容："+el.innerHTML);
? ? ? ? }
? ? }
? ?})
? </script>
?</body>

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

通俗一點說，就是你的點擊事件綁定在哪一個元素上，currentTarget獲取到的就是哪一個元素。

Event對象的一些兼容性寫法

//獲得event對象兼容性寫法
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);

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

您可能感興趣的文章: