vue組件開(kāi)發(fā)之用戶(hù)無(wú)限添加自定義填寫(xiě)表單的方法
效果圖:
代碼如下:
<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è)參考,也希望大家多多支持腳本之家。
- 詳解Vue后臺(tái)管理系統(tǒng)開(kāi)發(fā)日常總結(jié)(組件PageHeader)
- vue開(kāi)發(fā)拖拽進(jìn)度條滑動(dòng)組件
- Vue開(kāi)發(fā)之封裝上傳文件組件與用法示例
- 你不知道的Vue技巧之--開(kāi)發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
- Vue遞歸組件+Vuex開(kāi)發(fā)樹(shù)形組件Tree--遞歸組件的簡(jiǎn)單實(shí)現(xiàn)
- 詳解mpvue中小程序自定義導(dǎo)航組件開(kāi)發(fā)指南
- Vue組件大全包括(UI組件,開(kāi)發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例)
- Vue單文件組件開(kāi)發(fā)實(shí)現(xiàn)過(guò)程詳解
相關(guān)文章
vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)后沒(méi)有局域網(wǎng)地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue創(chuàng)建項(xiàng)目后沒(méi)有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項(xiàng)目后沒(méi)有webpack.config.js(vue.config.js)文件的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件詳解
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)可復(fù)用的輪播圖carousel組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11使用vue-router切換頁(yè)面時(shí),獲取上一頁(yè)url以及當(dāng)前頁(yè)面url的方法
這篇文章主要介紹了使用vue-router切換頁(yè)面時(shí),獲取上一頁(yè)url以及當(dāng)前頁(yè)面url的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11