本篇内容主要讲解“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的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
到此，相信大家对“vue怎么实现用户无限添加自定义填写表单功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
