vue?事件獲取當(dāng)前組件的屬性方式
更新時(shí)間：2022年03月31日 09:40:19 作者：a_靖
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue事件獲取當(dāng)前組件屬性
for循環(huán)把當(dāng)前的item傳遞給綁定事件：
<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)渲染出來當(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)聽器觸發(fā)事件的節(jié)點(diǎn)，即當(dāng)前處理該事件的元素、文檔或窗口。
通俗一點(diǎn)說，就是你的點(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)文章
vue子組件設(shè)計(jì)provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計(jì)provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue3.0 項(xiàng)目搭建和使用流程，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對(duì)vue感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)解鎖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇在vue項(xiàng)目中正確使用iconfont的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用Vite2+Vue3渲染Markdown文檔的方法實(shí)踐
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個(gè)值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
vue-element-admin登錄攔截設(shè)置白名單方式
這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09