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

1588 단어 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 구성 요소 개발 자 들 이 사용자 정의 폼 을 무한 추가 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue-router 는 게 으 른 로 딩 의 실현(vue 프로젝트 의 첫 로 딩 느 린 해결)
vue-image-crop Vue 기반 모 바 일 이미지 재단 구성 요소 예제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage