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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
详解jQuery事件
Jan 13 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
Vue组件基础用法详解
Feb 05 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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
php获取地址栏信息的代码
2008/10/08 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python中异常报错处理方法汇总
2016/11/20 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python列表对象实现原理详解
2019/07/01 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python使用进程Process模块管理资源
2020/03/05 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
个人简历自我评价八例
2013/10/31 职场文书
办公文员的工作岗位职责
2013/11/12 职场文书
公益活动邀请函
2014/02/05 职场文书
迟到检讨书500字
2014/02/05 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
mysql脏页是什么
2021/07/26 MySQL