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代码
Mar 18 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
理解javascript中的严格模式
Feb 01 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
vue全屏事件开发详解
Jun 17 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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新手上路(十四)
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
玩转方法:call和apply
2014/05/08 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python栈类实例分析
2015/06/15 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
python线程池threadpool实现篇
2018/04/27 Python
Python Requests库基本用法示例
2018/08/20 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
年度献血先进个人事迹材料
2014/02/14 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Java基础-封装和继承
2021/07/02 Java/Android
JS高级程序设计之class继承重点详解
2022/07/07 Javascript