快捷導(dǎo)航

vue組件開(kāi)發(fā)之用戶(hù)無(wú)限添加自定義填寫(xiě)表單的方法

更新時(shí)間：2018年08月28日 10:02:54 作者：codingNoob

今天小編就為大家分享一篇vue組件開(kāi)發(fā)之用戶(hù)無(wú)限添加自定義填寫(xiě)表單的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

效果圖：

代碼如下：

<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組件開(kāi)發(fā)之用戶(hù)無(wú)限添加自定義填寫(xiě)表單的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vant組件庫(kù)之tag漸變色不起作用的原因及解決
這篇文章主要介紹了vant組件庫(kù)之tag漸變色不起作用的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3中的抽離封裝方法實(shí)現(xiàn)
vue3中的任何一個(gè)組合式api都可以單獨(dú)抽離出去在另一個(gè)文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下
2022-08-08
利用nodeJS+vue圖片上傳實(shí)現(xiàn)更新頭像的過(guò)程
Vue是一套構(gòu)建用戶(hù)界面的框架,最近工作中遇到了一個(gè)需求,需要做一個(gè)更新頭像的通能,下面這篇文章主要給大家介紹了關(guān)于利用nodeJS+vue圖片上傳的相關(guān)資料,需要的朋友可以參考下
2022-04-04
Vuex modules模式下mapState/mapMutations的操作實(shí)例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue bus全局事件中心簡(jiǎn)單Demo詳解
ue-bus 提供了一個(gè)全局事件中心，并將其注入每一個(gè)組件，你可以像使用內(nèi)置事件流一樣方便的使用全局事件。這篇文章給大家介紹了vue bus全局事件中心簡(jiǎn)單Demo，需要的朋友參考下吧
2018-02-02
Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能
這篇文章主要介紹了Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
在vue中把含有html標(biāo)簽轉(zhuǎn)為html渲染頁(yè)面的實(shí)例
今天小編就為大家分享一篇在vue中把含有html標(biāo)簽轉(zhuǎn)為html渲染頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)樣式綁定 class/style的寫(xiě)法小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
vant4 封裝日期段選擇器的實(shí)現(xiàn)
本文主要介紹了vant4 封裝日期段選擇器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03