本篇内容主要讲解“vue组件开发之用户无限添加自定义填写表单的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue组件开发之用户无限添加自定义填写表单的方法”吧!
效果图:
代码如下:
<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> <h2>提交的信息: {{submsg}}</h2> </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组件开发之用户无限添加自定义填写表单的方法”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。