vue组件开发之用户无限添加自定义填写表单的方法
更新时间:2018年08月28日 10:02:54 作者:codingNoob
今天小编就为大家分享一篇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> <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组件开发之用户无限添加自定义填写表单的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue上传项目到git时,如何忽略node_modules文件夹
这篇文章主要介绍了vue上传项目到git时,如何忽略node_modules文件夹,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09unplugin-auto-import与unplugin-vue-components安装问题解析
这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-02-02
最新评论