vuejs動態(tài)添加input框的實例講解-創(chuàng)新互聯(lián)
實例如下：
<%@ 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>智能訴狀生成系統(tǒng)</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" rel="external nofollow" >
<!-- import iView -->
<script src="http://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 h2,
.full-writer-right h2{
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 h2,.template-h2{
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">
<h2>
信宜市人民法院智能訴狀生成系統(tǒng)
<span>XinYi People's Court Intelligent complaint generation system</span>
</h2>
<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">
<h2>實時預覽</h2>
</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">
<h2 class="template-h2">普通訴訟</h2>
<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 >此致</p>
<p>信宜市人民法院</p>
<p >具狀人（簽名或蓋章）：</p>
<p >年 月 日</p>
</div>
</div>
</div>
</div>
<div class="full-writer-right">
<div class="full-writer-head">
<div class="full-writer-head-l">
<h2 id="html-title">普通訴訟</h2>
</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="聯(lián)系電話：">
<i-input v-model="list.plaintiffTel" placeholder="輸入聯(lián)系電話" 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="聯(lián)系電話：">
<i-input v-model="list.defendantTel" placeholder="輸入聯(lián)系電話"></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) {
// 監(jiān)控變化，同步更新到
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) {
// 監(jiān)控變化，同步更新到
vm.formItem.textarea2 = html;
}
editor.create()
vm.formItem.textarea2 = editor.txt.html();
$("#div2 .w-e-text-container").css("height","120px");
</script>
</body>
</html>
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
分享文章：vuejs動態(tài)添加input框的實例講解-創(chuàng)新互聯(lián)
鏈接URL：http://muchs.cn/article34/cdcpse.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網頁設計公司、網站維護、虛擬主機、品牌網站設計、網站設計公司、網站收錄
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 出色的移動網站建設應當考慮符合什么標準 2021-11-15
- ?進行移動網站建設有什么益處及重要性分析 2023-03-15
- 移動網站建設應特別注意哪些事項 2022-11-16
- 移動網站建設中關于基于位置信息的品牌傳播策略 2021-07-26
- 移動網站建設有哪些細節(jié)工作？ 2021-08-25
- 汕頭移動網站建設：做移動網站這些問題必須要引起注意！ 2021-08-31
- 移動網站建設需要避免哪些陷阱 2016-08-25
- 在移動網站建設中必須了解哪些要點 2021-12-13
- 移動網站建設用戶體驗介紹 2021-08-24
- 移動網站建設需要注意修補這些漏洞 2022-10-29
- 移動網站建設需要做到這幾點 2022-05-02
- 移動網站建設哪些方面要引起建站者重視？ 2015-11-13