Vue3单击新增添加新的input

 

效果图：

 

代码：

<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("以达到上限")
      }
    },
    inp(){
      console.log(this.items)
    }
  }
}
</script>