<template>
  <div>
    <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i" @input="inp"> 
    <button @click="onAdd">添加</button>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      items: [""]
    }
  },
  methods: {
    onAdd() {
      if(this.items.length<5){
        this.items.push('')
      }else{
        alert("以達(dá)到上限")
      }
    },
    inp(){
      console.log(this.items)
    }
  }
}
</script>

<template>
? <div class="input_test">
? ? <el-input
? ? ? placeholder="請輸入內(nèi)容"
? ? ? v-for="(item, index) in modules"
? ? ? :key="index"
? ? ? v-model="item.text"
? ? ></el-input>
? ? <el-button type="success" @click="add">新增</el-button>
? </div>
</template>
?
<script>
export default {
? data() {
? ? return {
? ? ? inputList: ["inputOne", "inputTwo", "inputThree"],//模擬一個傳過來或者是請求到的數(shù)據(jù)
? ? ? modules: [
? ? ? ? {
? ? ? ? ? text: "text",
? ? ? ? },
? ? ? ],
? ? };
? },
? methods: {
? ? add() {//動態(tài)添加input框
? ? ? this.modules.push({ text: "text" });
? ? },
? },
? watch: {},
? computed: {},
? components: {},
? created() {},
? mounted() {//動態(tài)綁定input框
? ? for (const iterator of this.inputList) {
? ? ? this.modules.push({ text: iterator });
? ? }
? },
};
</script>
?
<style lang="scss" scoped></style>