vue 구성 요소 개발 자 는 사용자 정의 폼 작성 방법 을 무한 추가 합 니 다.

효과 그림:

코드 는 다음 과 같 습 니 다:

<template>
  <div class="checkbox">
    <div class="input">
      <p v-for="item in inputs">
        <span>     ：</span>
        <input type="text" v-model="item.val">
      </p>
      <button @click="addInput()">    </button>
      <button @click="sub()">    </button>
    </div>
    <h1>     ： {{submsg}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'checkbox',
    data (){
      return {
        inputs:[],
        submsg:''
      }
    },
    methods: {
      addInput (){
        var obj = {};
        obj.id = this.inputs.length;
        obj.val = "";
        this.inputs.push(obj);
      },
      sub (){
        this.submsg = this.inputs;
      },

    }
  }
</script>
<style scoped>
  *{margin:0 auto;padding:0;font-family:"    ";}
  .checkbox{
    width:800px;
    margin:50px auto;
  }
  .input p{
    padding:10px 0;
  }
</style>

이상 vue 구성 요소 개발 자 들 이 사용자 정의 폼 을 무한 추가 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.