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中的细节分析
Jun 30 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
信用卡效验程序
2006/10/09 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python使用requests.session模拟登录
2019/08/09 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
个人优缺点自我评价
2014/01/27 职场文书
宣传活动总结范文
2014/07/01 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
心得体会格式及范文
2016/01/25 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL