vuejs 动态添加input框的实例讲解

vuejs 动态添加动态添加input框的实例讲解框的实例讲解

今天小编就为大家分享一篇vuejs 动态添加input框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

实例如下：实例如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/>

<c:set var="ajaxUrl" value="${frontPath}${pageContext.request.contextPath}"/>

<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>

<link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

<script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script>

<script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script src="${ctxStatic}/modules/front/selfHelpRegistration/common/js/common.js"></script>

<link href="${ctxStatic}/modules/front/selfHelpRegistration/common/css/common.css" rel="external nofollow" rel="stylesheet">

<link href="${ctxStatic}/plugins/jquery-confirm-3.3.0-dist/jquery-confirm.min.css" rel="external nofollow" rel="stylesheet">

<script src="${ctxStatic}/plugins/jquery-confirm-3.3.0-dist/jquery-confirm.min.js"></script>

<script src="${ctxStatic}/modules/front/selfHelpRegistration/js/local_expire.js"></script>

<script src="${ctxStatic}/plugins/wangEditor-3.1.1/wangEditor.js"></script>

<style type="text/css">

.ivu-form .ivu-form-item-label,

.ivu-input{ font-size: 14px; }

.full-writer-left{ width: 680px; }

.full-writer-right{ display: flex; flex: 1;}

.full-writer-left,

.full-writer-right{

padding: 0;

}

.full-writer-left h1,

padding: 15px;

}

.full-writer-right .template{

display: flex;

padding: 0;

border-top: 1px solid #e7e7e7;

}

.fillHtml{

flex: 1;

padding: 15px;

justify-content: space-between;

}

.template-bg{ padding: 15px; background: #e7e7e7;}

.template-wrap{ height: 100%; padding: 15px 50px; background: #fff; overflow: auto;}

.templateHtml{ font-size: 18px; line-height: 30px; color: #000; overflow: auto;}

.templateHtml p{ margin: 15px 0px;}

.full-writer-left .templateHtml h1,.template-h1{

text-align: center;

font-size: 26px;

font-weight: bold;

margin-bottom: 15px;

}

.fill-tit{

position: relative;

display: flex;

align-items: center;

padding: 0 15px;

line-height: 45px;

background: #e7e7e7;

}

line-height: 30px;

border-radius: 50%;

text-align: center;

background: #d9534f;

font-size: 16px;

color: #fff;

opacity: 1;

}

.fill-center{

padding: 15px;

}

.fill-center .fill-item:last-child{

margin-bottom: 0;

}

.steps-wrap{

width: 169px;

padding: 15px;

background: #fff;

box-shadow: -2px 1px 10px #b3b3b3;

}