vuejs 动态添加input框的实例讲解
程序员文章站
2023-11-23 20:36:10
实例如下：
<%@ page language="java" contenttype="text/html; charset=utf-8" pageenco...
实例如下：
<%@ 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="//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框的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。