vue實(shí)現(xiàn)動(dòng)態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作
：id綁定 :id="‘a(chǎn)_'+index"
輸出的id為a_0，a_1。。。。。
<div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div>
然后在vue的實(shí)例中就可以拿到對(duì)應(yīng)的id
b(index){
this.list.splice(index,1);
}
或
<div @click="open($event)" id="1">添加<div>
open(a){
console.log(a.currentTarget.id)//1
}
補(bǔ)充知識(shí)：Vue中怎么動(dòng)態(tài)的去插入DOM節(jié)點(diǎn)呢？
問題描述：
排除數(shù)據(jù)的插入方式，假如存在兩組數(shù)據(jù)，每?jī)山M為一個(gè)對(duì)象，那么如果要加載下一個(gè)對(duì)象時(shí)應(yīng)該怎么去插入呢？
2017/09/14 昨天晚上在睡夢(mèng)中，恍恍惚惚地想到了一個(gè)解決方法，其實(shí)也很簡(jiǎn)單，只不過之前一直沒有細(xì)想。
解決方法：
1.之前通過artTemplate插件進(jìn)行先渲染再插入的方式實(shí)現(xiàn)該需求。
2.而Vue則是數(shù)據(jù)更改之后再去渲染
3.那么既然這樣那就把問題中的兩組數(shù)據(jù)手動(dòng)組裝為一個(gè)數(shù)組，然后動(dòng)態(tài)的插入，問題不就迎刃而解了嗎
流程：假如存在A和B兩個(gè)數(shù)組需要進(jìn)行渲染
C = [
{
‘A': [],
‘B': []
}
]
組裝為C數(shù)組，然后每次獲取新的數(shù)據(jù)之后，動(dòng)態(tài)地插入C數(shù)組，然后在DOM結(jié)構(gòu)中循環(huán)渲染C數(shù)組，bingo！
以上這篇vue實(shí)現(xiàn)動(dòng)態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue三元運(yùn)算之多重條件判斷方式(多個(gè)枚舉值轉(zhuǎn)譯)
這篇文章主要介紹了vue三元運(yùn)算之多重條件判斷方式(多個(gè)枚舉值轉(zhuǎn)譯)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue使用screenfull實(shí)現(xiàn)全屏效果
這篇文章主要為大家詳細(xì)介紹了Vue使用screenfull實(shí)現(xiàn)全屏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)
這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件，可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間，在倒計(jì)時(shí)開始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown,需要的朋友可以參考下2018-10-10
淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求
這篇文章主要介紹了淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在Vue中,路由攔截器主要用于在導(dǎo)航到某個(gè)路由前或者離開某個(gè)路由時(shí)進(jìn)行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下2024-03-03
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
element?table?表格控件實(shí)現(xiàn)單選功能
本文主要介紹了element?table?表格控件實(shí)現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07