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组件开发之用户无限添加自定义填写表单的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用vux-ui自定义表单验证遇到的问题及解决方法

    Vue使用vux-ui自定义表单验证遇到的问题及解决方法

    初学框架vue搭配vux使用发现这个UI库使用有些力不从心.下面说说自己在表单验证过程遇到的两个需求问题及解决的方法. 1.使用x-input组件可知,官方只给了三种类型的is-type验证器,分别是:email,china-name,china-mobile,其他需要自己自定义验证器,怎么写验证器? 解决方法:自定义is-type验证器(试验过可以在valid使用正则验证) <x-input type="number" v-model="code" plac

  • Vue2.0表单校验组件vee-validate的使用详解

    vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 npm install vee-validate@next --save 注意:@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二.引用 import Vue from 'vue'; import VeeValidate

  • Vue中使用vee-validate表单验证的方法

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v

  • vue表单自定义校验规则介绍

    如下所示: <div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"

  • vue组件开发之用户无限添加自定义填写表单的方法

    效果图: 代码如下: <template> <div class="checkbox"> <div class="input"> <p v-for="item in inputs"> <span>自定义字段:</span> <input type="text" v-model="item.val"> </p> &

  • Python3.4 splinter(模拟填写表单)使用方法

    如下所示: from splinter.browser import Browser b = Browser('chrome') url = 'https://kyfw.12306.cn/otn/leftTicket/init' b.visit(url) #访问网址 first_found = b.find_by_id('login_user').click() b.fill('loginUserDTO.user_name', '12306账号') b.fill('userDTO.passwor

  • javascript实现自动填写表单实例简析

    javascript实现自动填写表单实例简析

    本文实例讲述了javascript实现自动填写表单的方法.分享给大家供大家参考,具体如下: 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效. 步骤 1. 找到页面中对应的form,把form中所需的html控件列出来,如 <form name="customersForm" id="myform" method="

  • 深入浅析Vue组件开发

    深入浅析Vue组件开发

    前言 这里讲的主要是想谈谈基于Vue的一个组件开发.不得不说的一点就是,在实际的Vue项目中,页面中每一个小块都是由一个个组件(.vue文件)组成,经过抽离后,然后再合并一起组成一个页面.由于上家公司我负责多的是可视化这一块的开发,这边我也将带着大家进行一个Vue项目中的可视化组件的开发,这里用到的框架将是主流的可视化框架highcharts. 一.Vue环境的搭建 1.Mac用户 首先安装包管理homebrew /usr/bin/ruby -e "$(curl -fsSL https://ra

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • Vue组件开发技巧总结

    前言 临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇.接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件. 正文 Vue 单文件组件开发 当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式. // 注册 Vue.component('my-component', { template: '<div>A custom compo

  • vue 组件开发原理与实现方法详解

    本文实例讲述了vue 组件开发原理与实现方法.分享给大家供大家参考,具体如下: 概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件,这个文件分为三部分. 1.模板 2.脚本 3.样式 我们看一个系统中最常用的组件. <template> <div > <div v-if="right=='r'" class=

  • springboot+vue组件开发实现接口断言功能

    springboot+vue组件开发实现接口断言功能

    目录 基于 springboot+vue 的测试平台 一.组件的关系 二.组件的开发 1. ApiAssertions 2. ApiAssertionsEdit 3. ApiAssertionJsonPath 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 接下来准备开发请求断言功能.关于这个功能要实现哪些需求,长什么样子,我参考了下其他优秀的业界工具,比如apifox.metersphere等. 于是决定还是先紧着最常用的来开发:JSONPath.响应时间.文本,而

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • vue构建动态表单的方法示例

    概述 后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单.并且能够在外部得到渲染出来的表单的数据,可以对表单进行重置操作.我结合element ui的控件的下拉框,输入框,时间选择控件和vue-treeselect,做了一个动态表单. v-model的理解 先简单讲一下vue-model是怎么玩的.其实vue-model相当于给表单元素传递一个value,外部监听input事件.所以我们自己封装表单组件的时候也是可以传递一个valu

随机推荐