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


Posted in Javascript onAugust 28, 2018

效果图:

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组件开发之用户无限添加自定义填写表单的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 #Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 #Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 #Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 #Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
使用D3.js构建实时图形的示例代码
Aug 28 #Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 #Javascript
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python enumerate函数的使用方法总结
2017/11/15 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python多线程与多进程及其区别详解
2019/08/08 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
医学院校毕业生自荐信范文
2014/01/01 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
图书馆标语
2014/06/19 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
音乐研修感悟
2015/11/18 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书