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 = "";
      }
    }
  },
  
};