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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
13个PHP函数超实用
Oct 21 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
使用vue制作滑动标签
Sep 21 Javascript
javascript贪吃蛇游戏设计与实现
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中的日期处理方法集锦
2007/01/02 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript引用对象的方法代码
2007/08/13 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python解析json代码实例解析
2019/11/25 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
店长助理岗位职责
2013/12/13 职场文书
银行办理业务介绍信
2014/01/18 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
2015驻村干部工作总结
2015/04/07 职场文书