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 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 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
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
载入进度条 效果
2006/07/08 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
JS数组中对象去重操作示例
2019/06/04 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python中变量交换的例子
2014/08/25 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Django中的ajax请求
2018/10/19 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
三下乡活动方案
2014/01/31 职场文书
乔迁之喜主持词
2014/03/27 职场文书
音乐学专业求职信
2014/07/22 职场文书
python爬虫selenium模块详解
2021/03/30 Python
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server