vue 利用数组循环动态添加组件

1. 实现效果：

当第一个框输入内容之后，点击添加，动态添加第二个输入框，以此类推；

2. 实现思想：

构建需要动态添加的模板，利用 v-for 循环模板。 通过 index 判断当前模板，绑定当前值。当点击 添加 时 利用数组方法 push 一个值进入数组从而达到添加一个相应模板的效果。利用 splice 删除相应位置的模板

3. 实现代码：

 <div class="regex_item"><div class="add_label_title"><label> 正则匹配：<span><img src="./images/question_icon.png" alt="疑问"></span></label></div><div class="regex_modals"><div v-for="(item,index) in regexNameList":key="index"class="regex_input"><dy-input placeholder="请输入正则匹配规则"v-model="item.name" /><span class="delete"@click="deleteRegex(index)">删除</span></div><div class="add_view"@click="addRegex()"> +添加</div></div></div>

export default {data() {return {regexNameList: [{name: ""}],};},methods: {// 添加一个模糊规则输入框addRegex() {this.regexNameList.push({ name: "" });},// 删除相应模糊规则输入框deleteRegex(index) {if (this.regexNameList.length > 1) {this.regexNameList.splice(index, 1);} else {this.regexNameList[index].name = "";}}},};