全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

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

2020-11-27 来源：欧得旅游网

实例如下：

<%@ 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"/>
 
<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>智能诉状生成系统</title>
	<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>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import stylesheet -->
	<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css" rel="external nofollow" >
	<!-- import iView -->
	<script src="https://www.gxlcms.com//unpkg.com/iview/dist/iview.min.js"></script>
	<link href="${ctxStatic}/modules/front/selfHelpRegistration/css/base.css" rel="external nofollow" rel="stylesheet">
	<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, 
	.full-writer-right h1{
	margin: 0;
	font-size: 16px;
	}
	.full-writer-left .template,
	.full-writer-right .template{
	padding: 15px;
	}
	.full-writer-right .template{
	display: flex;
 	padding: 0;
	border-top: 1px solid #e7e7e7;
	}
	.fillHtml{
	flex: 1;
 	padding: 15px;
	}
	.full-writer-head {
	 display: flex;
	 align-items: center;
	 height: 50px;
	 padding: 0 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: 15px;
	color: #000;
	}
	.template-text{ text-indent: 1cm; }
	.fill-item{ 
	border: 1px solid #ddd; 
	margin-bottom: 15px;
	}
	.fill-tit{
	position: relative;
	display: flex;
 	align-items: center;
	padding: 0 15px;
	line-height: 45px;
 	background: #e7e7e7;
	}
	.fill-tit>span{ margin-right: 20px; }
	.fill-tit .button{ margin-right: 15px; }
	.fill-tit .close{
	position: absolute;
	 right: 10px;
	 width: 30px;
	 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{
	margin-bottom: 15px;
	}
	.form-list{
	margin-bottom: 15px;
	}
	.fill-center .fill-item:last-child{
	margin-bottom: 0;
	}
	.steps-wrap{
	width: 169px;
	 padding: 15px;
	 background: #fff;
	 box-shadow: -2px 1px 10px #b3b3b3;
	}
	.slider-nav li {
	 position: relative;
	 list-style: none;
	 padding: 15px 15px 15px 18px;
	 float: none;
	 text-align: left;
	 font-size: 14px;
	}
	</style>
	</head>
	<body>
	<div class="page-wrap" id="app">
	<header>
	<div class="head-left">
	<h1>
	信宜市人民法院智能诉状生成系统
	<span>XinYi People's Court Intelligent complaint generation system</span>
	</h1>
	<p id="todayDate"></p>
	</div>
	<div class="btn-box" id="top-nav-btn">
 
	</div>
	</header>
	<div class="page-content no-pad">
	<div class="full-box write">
	<div class="full-writer">
	<div class="full-writer-left">
	<div class="full-writer-head">
	<div class="full-writer-head-l">
	<h1>实时预览</h1>
	</div>
	<div class="full-writer-head-r">
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="m-btn button b-info" id="preview-btn"><i class="icon-printer"></i><span>打印</span></a>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="m-btn button b-info" id="preview-btn"><i class="icon-printer"></i><span>参考模板</span></a>
	</div>
	</div>
	
	<div class="template template-bg">
	<div class="template-wrap">
 	<div id="templateHtml" class="templateHtml">
	<h1 class="template-h1">普通诉讼</h1>
	<div class="model-list" v-for="(list,index) in lists">
	<label>原告：</label>{{ list.plaintiffName }}，{{list.plaintiffSex}}， {{list.plaintiffAge}}岁， {{list.plaintiffNation}}，{{list.plaintiffAddress}}，身份证号码：{{list.plaintiffUserId}}，电话号码：{{list.plaintiffTel}}<br/>
	</div>
	<div class="model-list" v-for="(list,index) in gList">
	<label>原告：</label>{{ list.tissueName }}，代表人：{{ list.tissueUserName}}<br/>
	</div>
	<div class="model-list" v-for="(list,index) in bgzList">
	<label>被告：</label>{{ list.defendantName }}，{{list.defendantSex}}， {{list.defendantAge}}岁， {{list.defendantNation}}，{{list.defendantAddress}}，身份证号码：{{list.defendantUserId}}，电话号码：{{list.defendantTel}}<br/>
	</div>
	<div class="model-list" v-for="(list,index) in gList">
	<label>被告：</label>{{ list.tissueName }}，代表人：{{ list.tissueUserName}}<br/>
	</div>
	
	
	<label>请求事项：</label>
	<p class="template-text" v-html="formItem.textarea"></p>
	<label>事实与理由：</label>
	<p class="template-text" v-html="formItem.textarea2"></p>
	<p style="text-indent: 1cm;">此致</p>
	<p>信宜市人民法院</p>
	<p style="text-align: right; padding-right: 3cm;">具状人（签名或盖章）：</p>
	<p style="text-align: right;">年 月 日</p>
	</div>
	</div>
	</div>
	</div>
	<div class="full-writer-right">
	<div class="full-writer-head">
	<div class="full-writer-head-l">
	<h1 id="html-title">普通诉讼</h1>
	</div>
	<div class="full-writer-head-r">
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="m-btn button b-primary" id="save-btn"><i class="icon-drawer"></i><span>保存</span></a>
	
	<a href="javascript:history.go(-1);" rel="external nofollow" class="m-btn button b-danger"><i class="icon-arrow-left2"></i><span>返回</span></a>
	</div>
	</div>
	<div class="template">
	<div id="selfHtml" class="templateHtml fillHtml">
	<i-form :label-width="100">
	<div class="fill-item">
	<div class="fill-tit">
	<span>原告</span>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="add" class="s-btn button b-primary"><span>添加自然人</span></a>
	<!-- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="s-btn button b-primary"><span>添加法人</span></a> -->
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="addZZ" class="s-btn button b-primary"><span>添加组织</span></a>
	</div>
	<div class="fill-center" id="plaintiff-list">
	
	<!-- 原告自然人 -->
	<div class="form-list" v-for="(list,index) in lists">
	<div class="fill-item">
	<div class="fill-tit">
	<span>原告（自然人）</span>
	<div class="close" v-on:click="del(index)"><i class="icon-close"></i></div>
	</div>
	<div class="fill-center" class="plaintiff-form">
	<row>
	<i-col span="12">
	 <form-item label="姓名：">
	 <i-input v-model="list.plaintiffName" placeholder="姓名" name="name"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="性别：">
	 <radio-group v-model="list.plaintiffSex" name="sex">
	 <radio label="男">男</radio>
	 <radio label="女">女</radio>
	 </radio-group>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	 	<i-col span="12">
	 	<form-item label="年龄：">
	 <i-input v-model="list.plaintiffAge" placeholder="年龄" name="age"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="民族：">
	 <i-input v-model="list.plaintiffNation" placeholder="民族" name="nation"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	 	<i-col span="24">
	 <form-item label="住址：">
	 <i-input v-model="list.plaintiffAddress" placeholder="居住地址" name="address"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	<i-col span="12">
	 <form-item label="身份证号码：">
	 <i-input v-model="list.plaintiffUserId" placeholder="输入身份证号码" name="identityCardNumber"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="联系电话：">
	 <i-input v-model="list.plaintiffTel" placeholder="输入联系电话" name="mobileNumber"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	</div>
	</div>
	</div>
	<!-- 原告自然人end -->
	
	<!-- 原告组织 -->
	<div class="form-list" v-for="(list,index) in gList">
	 	<div class="fill-item">
	<div class="fill-tit">
	<span>原告（组织）</span>
	<div class="close" v-on:click="delZZ(index)"><i class="icon-close"></i></div>
	</div>
	<div class="fill-center">
	<row>
	<i-col span="12">
	 <form-item label="组织名称：">
	 <i-input v-model="list.tissueName" placeholder="组织姓名"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 <form-item label="负责人名称：">
	 <i-input v-model="list.tissueUserName" placeholder="负责人姓名"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	</div>
	</div>
	</div>
	<!-- 原告组织end -->
	
	 </div>
	</div>
	<div class="fill-item">
	<div class="fill-tit">
	<span>被告</span>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="addBGZ" class="s-btn button b-primary"><span>添加自然人</span></a>
	<!-- <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="s-btn button b-primary"><span>添加法人</span></a> -->
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="addBGG" class="s-btn button b-primary"><span>添加组织</span></a>
	</div>
	<div class="fill-center">
	
	<!-- 被告自然人 -->
	<div class="form-list" v-for="(list,index) in bgzList">
	 	<div class="fill-item">
	<div class="fill-tit">
	<span>被告（自然人）</span>
	<div class="close" v-on:click="delBGZ(index)"><i class="icon-close"></i></div>
	</div>
	<div class="fill-center">
	<row>
	<i-col span="12">
	 <form-item label="姓名：">
	 <i-input v-model="list.defendantName" placeholder="姓名"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="性别：">
	 <radio-group v-model="list.defendantSex">
	 <radio label="男">男</radio>
	 <radio label="女">女</radio>
	 </radio-group>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	 	<i-col span="12">
	 	<form-item label="年龄：">
	 <i-input v-model="list.defendantAge" placeholder="年龄"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="民族：">
	 <i-input v-model="list.defendantNation" placeholder="民族"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	 	<i-col span="24">
	 <form-item label="住址：">
	 <i-input v-model="list.defendantAddress" placeholder="居住地址"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	 <row>
	<i-col span="12">
	 <form-item label="身份证号码：">
	 <i-input v-model="list.defendantUserId" placeholder="输入身份证号码"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 	<form-item label="联系电话：">
	 <i-input v-model="list.defendantTel" placeholder="输入联系电话"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	</div>
	</div>
	</div>
	<!-- 被告自然人 -->
	
	<!-- 被告组织 -->
	<div class="form-list" v-for="(list,index) in bggList">
	 	<div class="fill-item">
	<div class="fill-tit">
	<span>原告（组织）</span>
	<div class="close" v-on:click="delBGG(index)"><i class="icon-close"></i></div>
	</div>
	<div class="fill-center">
	<row>
	<i-col span="12">
	 <form-item label="组织名称：">
	 <i-input v-model="list.tissueName" placeholder="组织姓名"></i-input>
	 </form-item>
	 </i-col>
	 <i-col span="12">
	 <form-item label="负责人名称：">
	 <i-input v-model="list.tissueUserName" placeholder="负责人姓名"></i-input>
	 </form-item>
	 </i-col>
	 </row>
	</div>
	</div>
	</div>
	<!-- 被告组织end -->
	
	
	 </div>
	</div>
	<div class="fill-item">
	<div class="fill-tit">
	<span>请求事项</span>
	</div>
	<div class="fill-center">
	<div id="div1"></div>
	<!-- <i-input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 8,maxRows: 15}" placeholder="输入请求事项..."></i-input> -->
	</div>
	</div>
	<div class="fill-item">
	<div class="fill-tit">
	<span>事实与理由</span>
	</div>
	<div class="fill-center">
	<div id="div2"></div>
	<!-- <i-input v-model="formItem.textarea2" type="textarea" :autosize="{minRows: 8,maxRows: 15}" placeholder="输入事实与理由..."></i-input> -->
	</div>
	</div>
	 </i-form>
	</div>
	<!-- 步骤 -->
	<div class="steps-wrap">
	<ul class="slider-nav">
	<li>原告</li>
	<li>被告</li>
	<li>请求事项</li>
	<li>事实与理由</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<!-- <div class="head">
	<div class="head-r">
	
	</div>
	</div> -->
	</div>
	</div>
	</div>
	
	<!-- 读取框 -->
	<div id="createDialog" class="crudDialog" hidden>
	<div class="form-group">
	<div class="read-icon">
	<img class="img-responsive center-block" src="${ctxStatic}/modules/front/selfHelpRegistration/image/sfz.jpg">
	</div>
	<div class="read-txt">
	<p>请将居民二代身份证放在读卡处</p>
	</div>
	</div>
	</div>
<script type="text/javascript">
 
 
 var hour = 1000*60*60 ;
 var frontPath = "${front}";
	var info = getLocalValue("cardInfo",hour);
	if(info){
	$("#top-nav-btn").html("");
	var htmlTxt = "<a href='javascript:;' class='s-btn m-btn'><i class='icon-user2'>" +
	"</i><span>"+info.name+"</span></a>" +
	"<a href='javascript:;' onclick=location.href='${front}/selfHelpRegistration/index' class='s-btn m-btn button b-info'>" +
	"<i class='icon-homepage_fill'></i>" +
	"<span>首页</span></a>" +
	"<a href='javascript:;' onclick=location.href='${front}/selfHelpRegistration/myList' class='s-btn m-btn button b-info'>" +
	"<i class='icon-file-text2'></i>" +
	"<span>我的诉状</span></a>" +
	"<a href='javascript:;' onclick='logout();' class='s-btn m-btn button b-danger'>" +
	"<i class='icon-out'></i><span>退出</span>" +
	"</a>";
	$("#top-nav-btn").html(htmlTxt);
	}else{
	$("#top-nav-btn").html("");
	var htmlTxt = "<a href='javascript:;' class='s-btn m-btn' onclick='login();'>" +
	"<i class='icon-user2'></i>" +
	"<span id='username'>请登录</span>" +
	"</a>";
	$("#top-nav-btn").html(htmlTxt);
	}
	
	
 
	function getQueryString(name) {
	var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
	if (result == null || result.length < 1) {
	return "";
	}
	return result[1];
	}
	
	
	
	function mockLogin(){
	localStorage.setItem("userICN","12300");
	var info = new Object();
	info.userIdentific = 12300;
	setLocalValue('cardInfo', info);
 
	}
	
 
 
	$(document).ready(function(){
 
 
	});
	
</script>
 
 
<!-- v2填单 -->
 <script>
 var vm = new Vue({
 el : "#app",
 data:{
 tables : [],
 lists:[{
 plaintiffName: '',
 plaintiffSex: '男',
 plaintiffAge: '',
 plaintiffNation: '',
 plaintiffAddress: '',
 plaintiffUserId: '',
 plaintiffTel: '' 
 }],
 gList:[{
 tissueName: '',
 tissueUserName: '' 
 }],
	 bgzList:[{
 defendantName: '',
 defendantSex: '男',
 defendantAge: '',
 defendantNation: '',
 defendantAddress: '',
 defendantUserId: '',
 defendantTel: '' 
	 }],
 bggList:[{
 tissueName: '',
 tissueUserName: '' 
 }],
	 formItem:{
 textarea: '',
 textarea2: ''
	 }
 },
 methods:{
 add:function(){
 let cope = {
 plaintiffName: '',
 plaintiffSex: '男',
 plaintiffAge: '',
 plaintiffNation: '',
 plaintiffAddress: '',
 plaintiffUserId: '',
 plaintiffTel: ''
 }
 this.lists.push(cope);
 console.log(this.lists)
 },
 del:function(index){
 this.lists.splice(index,1);
 console.log(this.lists)
 },
 addZZ:function(){
 let cope = {
 tissueName: '',
 tissueUserName: '' 
 }
 this.gList.push(cope);
 },
 delZZ:function(index){
 this.gList.splice(index,1);
 },
 addBGZ:function(){
 let cope = {
 defendantName: '',
 defendantSex: '男',
 defendantAge: '',
 defendantNation: '',
 defendantAddress: '',
 defendantUserId: '',
 defendantTel: '' 
 }
 this.bgzList.push(cope);
 },
 delBGZ:function(index){
 this.bgzList.splice(index,1);
 },
 addBGG:function(){
 let cope = {
 defendantName: '',
 defendantSex: '男',
 defendantAge: '',
 defendantNation: '',
 defendantAddress: '',
 defendantUserId: '',
 defendantTel: '' 
 }
 this.bggList.push(cope);
 },
 delBGG:function(index){
 this.bggList.splice(index,1);
 }
 }
 });
 
 
 	//富文本框
 	var E = window.wangEditor
 var editor = new E('#div1')
 	// 自定义菜单配置
 editor.customConfig.menus = [
 'bold',
 'italic',
 'justify', // 对齐方式
 'underline'
 ]
 editor.customConfig.onchange = function (html) {
 // 监控变化，同步更新到
 vm.formItem.textarea = html;
 }
 editor.create()
 vm.formItem.textarea = editor.txt.html();
 $("#div1 .w-e-text-container").css("height","120px");
 
 var editor = new E('#div2')
 	// 自定义菜单配置
 editor.customConfig.menus = [
 'bold',
 'italic',
 'justify', // 对齐方式
 'underline'
 ]
 editor.customConfig.onchange = function (html) {
 // 监控变化，同步更新到
 vm.formItem.textarea2 = html;
 }
 editor.create()
 vm.formItem.textarea2 = editor.txt.html();
 $("#div2 .w-e-text-container").css("height","120px");
 
 </script>
 
</body>
</html>

效果图：

拓展知识：vue中点击按钮,添加一排输入框的方法

<div>
 <el-button type="primary" style="margin-top: 10px;" @click="addProducts">添加产品</el-button>
 <el-form >
 <el-form-item>
 <el-table :data="productNews" border>
 <el-table-column prop="name" label="名称">
 <template slot-scope="scope">
 <el-input 

v-model="productNews[scope.$index].name

@focus="getAlert()"></el-input> </template> </el-table-column> <el-table-column prop="manufacturer" label="生产厂商" width="100"> <template slot-scope="scope"> <el-input v-model="productNews[scope.$index].manufacturer" ></el-input> </template> </el-table-column> <el-table-column label="操作" width="70"> <template slot-scope="scope"> <el-button type="text" size="small" @click="removeProduct(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </el-form-item> </el-form> </div></template><script>

js方法：

export default {

data(){ return{ productNews:[] } },

methods:{

addProducts(){ this.productNews.push({car:''}) },

getAlert(){ },

removeProduct(index){ this.productNews.splice(index,1); } } }</script>

就是在输入框 中v-model 用一个数组productNews[scope.$index].manufacturer 然后添加时，数组下标加一，删除时，数组下标减一

以上这篇vuejs 动态添加input框的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
显示全文