鍍金池/ 問(wèn)答/HTML/ vue動(dòng)態(tài)添加HTML標(biāo)簽，并添加指令和事件

vue動(dòng)態(tài)添加HTML標(biāo)簽，并添加指令和事件

現(xiàn)在有個(gè)需求，如圖：
圖片描述

當(dāng)我點(diǎn)擊右側(cè)按鈕時(shí)，動(dòng)態(tài)添加一組HTML標(biāo)簽，樣式和前面一樣，并且給每個(gè)input/seclect加上v-model和按鈕。而且這種是可以無(wú)限添加的，最后要獲取其數(shù)據(jù)
在網(wǎng)上看到動(dòng)態(tài)生成HTML標(biāo)簽的是直接引入vue.js實(shí)現(xiàn)的。但是我這是vue工程，沒(méi)有實(shí)現(xiàn)成功。請(qǐng)問(wèn)怎么實(shí)現(xiàn)，或者這種需求有什么別的好辦法呢？

回答
編輯回答
忘了我

你描述的問(wèn)題就是Vue的核心功能啊，不管你是用script引入的Vue，還是用vue-cli生成的應(yīng)用骨架。這個(gè)問(wèn)題，只能靠你自己再去看下官方文檔，研究下怎么“間接地”用“數(shù)據(jù)驅(qū)動(dòng)視圖”，而不是點(diǎn)擊下按鈕直接就添加一組HTML標(biāo)簽。這是個(gè)思路問(wèn)題，思路恰恰就是Vue的核心思想。相關(guān)的知識(shí)點(diǎn)：Vue列表渲染，操作（點(diǎn)擊）改變數(shù)據(jù)，Vue監(jiān)聽(tīng)到數(shù)據(jù)的變化動(dòng)態(tài)渲染列表（也就是你說(shuō)的添加一組HTML標(biāo)簽）。

2018年6月27日 10:15
編輯回答
尐飯團(tuán)

已解決，寫(xiě)成組件的形式，點(diǎn)擊動(dòng)態(tài)生成組件。

<component :is="item.component" v-for="item in items" style="margin-button: 10px;" @rainData="rainData"></component>
2018年7月24日 11:38