vue动态添加HTML标签,并添加指令和事件

现在有个需求,如图:
图片描述

当我点击右侧按钮时,动态添加一组HTML标签,样式和前面一样,并且给每个input/seclect加上v-model和按钮。而且这种是可以无限添加的,最后要获取其数据
在网上看到动态生成HTML标签的是直接引入vue.js实现的。但是我这是vue工程,没有实现成功。请问怎么实现,或者这种需求有什么别的好办法呢?

阅读 20.1k
2 个回答

你描述的问题就是Vue的核心功能啊,不管你是用script引入的Vue,还是用vue-cli生成的应用骨架。这个问题,只能靠你自己再去看下官方文档,研究下怎么“间接地”用“数据驱动视图”,而不是点击下按钮直接就添加一组HTML标签。这是个思路问题,思路恰恰就是Vue的核心思想。相关的知识点:Vue列表渲染,操作(点击)改变数据,Vue监听到数据的变化动态渲染列表(也就是你说的添加一组HTML标签)。

已解决,写成组件的形式,点击动态生成组件。

<component :is="item.component" v-for="item in items" style="margin-button: 10px;" @rainData="rainData"></component>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题