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