vuejs 动态添加input框的实例讲解
程序员文章站
2022-07-22 09:19:40
实例如下:
<%@ 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框的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Java实现简单双色球摇奖功能过程解析
下一篇: 网站优化时收录量重要,还是外链重要?