vue组件开发之用户无限添加自定义填写表单

不念不忘少年蓝@ 2021-09-29 04:00 222阅读 0赞

![这里写图片描述][70]

<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>  
\---------------------   
作者：codingNoob   
来源：CSDN   
原文：https://blog.csdn.net/codingnoob/article/details/80140684   
版权声明：本文为博主原创文章，转载请附上博文链接！

[70]: /images/20210725/af8378f53f6047cdb00588910745090b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue自定义封装Loading组件

一、需求问题在vue项目的开发中，会经常遇到这样的需求。当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加

蔚落/ 2023年06月23日 12:59/ 0 赞/ 3 阅读

相关基于vue自定义封装 toast组件

自定义toast组件 `原文首发：https://www.jianshu.com/p/0891ae3a7e6d` 在这里首先感谢博主的分享，公司项目中需要用到toast

骑猪看日落/ 2023年02月17日 03:39/ 0 赞/ 8 阅读

相关 VUE-Element组件（九）Form表单

一、label加空格：直接使用 是不生效的，需要加slot插槽： <el-form-item> <label s

不念不忘少年蓝@/ 2023年01月17日 06:25/ 0 赞/ 217 阅读

相关 Activiti 用户任务关联自定义表单

[SpringBoot集成的Activiti6.0代码（绘制工具界面代码 + 审批代码）][SpringBoot_Activiti6.0_ _] 1、问题阐述通常每一个“

拼搏现实的明天。/ 2023年01月07日 12:21/ 0 赞/ 417 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 466 阅读

相关 vue组件开发之用户无限添加自定义填写表单

![这里写图片描述][70] <template> <div class="checkbox"> <div class="input">

不念不忘少年蓝@/ 2021年09月29日 04:00/ 0 赞/ 223 阅读

相关 Angular: [ControlValueAccessor] 自定义表单控件

Angular: \[ControlValueAccessor\] 自定义表单控件我们在实际开发中，通常会遇到各种各样的定制化功能，会遇到有些组件会与 Angular

逃离我推掉我的手/ 2021年09月20日 17:56/ 0 赞/ 430 阅读

相关 Vue.js组件通信之自定义事件

组件通信从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示： ![在这里插入图片描述

╰+攻爆jí腚メ/ 2021年08月13日 21:42/ 0 赞/ 515 阅读

相关自定义插件,封装Toast组件(Vue)

使用方法在main.js通过Vue.use安装后,在其他组件内部,this.$toast.show(弹出内容,消失事件毫秒)使用代码实例:

深碍√TFBOYSˉ_/ 2021年07月24日 22:41/ 0 赞/ 590 阅读

相关 flume之自定义sink组件

flume内部提供了很多种sink，如：logger、file\_roll、avro、hdfs、kafak、es等，方便直接将event数据对接到本地磁盘、或者其他第三方存储中

阳光穿透心脏的1/2处/ 2021年06月24日 15:57/ 0 赞/ 659 阅读