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

不念不忘少年蓝@ 2021-09-29 04:00 190阅读 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