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实现带省略号的分页
Apr 27 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php中error与exception的区别及应用
2014/07/28 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
django实现前后台交互实例
2017/08/07 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
社区科普工作方案
2014/06/03 职场文书
劳动竞赛口号
2014/06/16 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS