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父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)，全文通過舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue computed計(jì)算屬性的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue多布局模式實(shí)現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實(shí)現(xiàn)方法，多布局模式可以根據(jù)用戶角色所在場(chǎng)景切換頁(yè)面布局，是非常常見的基礎(chǔ)功能，感興趣的同學(xué)可以參考下文2023-05-05
html+vue實(shí)現(xiàn)分頁(yè)功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用html+vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
創(chuàng)建vue報(bào)錯(cuò)vue-cli Failed to download repo&n
通過vue-cli創(chuàng)建Vue項(xiàng)目時(shí),若遇到連接超時(shí)錯(cuò)誤,可采用離線方式解決,具體操作是下載并解壓vue-templates/webpack到本地.vue-templates目錄,再使用--offline參數(shù)重新執(zhí)行初始化命令2024-09-09
文章介紹了如何在需求系統(tǒng)中創(chuàng)建一個(gè)位于頁(yè)面上方的公告展示組件,展示了如何在App.vue或其他頁(yè)面組件中使用這個(gè)公告組件,感興趣的朋友一起看看吧2025-01-01
vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決
這篇文章主要介紹了vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項(xiàng)目實(shí)現(xiàn)局部全屏完整代碼
最近需要做一個(gè)全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)局部全屏的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的,這篇文章主要介紹了導(dǎo)致VUE頁(yè)面不刷新的問題分析及解決方法,需要的朋友可以參考下2024-04-04