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

   <title>智能诉状生成系统</title><!-- import stylesheet --><!-- import iView --> .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; }  <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"> <i class="icon-printer"></i><span>打印</span><i class="icon-printer"></i><span>参考模板</span></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"> <label>原告：</label>{{ list.plaintiffName }}，{{list.plaintiffSex}}， {{list.plaintiffAge}}岁， {{list.plaintiffNation}}，{{list.plaintiffAddress}}，身份证号码：{{list.plaintiffUserId}}，电话号码：{{list.plaintiffTel}}<br /></div><div class="model-list"> <label>原告：</label>{{ list.tissueName }}，代表人：{{ list.tissueUserName}}<br /></div><div class="model-list"> <label>被告：</label>{{ list.defendantName }}，{{list.defendantSex}}， {{list.defendantAge}}岁， {{list.defendantNation}}，{{list.defendantAddress}}，身份证号码：{{list.defendantUserId}}，电话号码：{{list.defendantTel}}<br /></div><div class="model-list"> <label>被告：</label>{{ list.tissueName }}，代表人：{{ list.tissueUserName}}<br /></div><label>请求事项：</label><p class="template-text"></p><label>事实与理由：</label><p class="template-text"></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"> <i class="icon-drawer"></i><span>保存</span><i class="icon-arrow-left2"></i><span>返回</span></div></div><div class="template"> <div id="selfHtml" class="templateHtml fillHtml">  <div class="fill-item"> <div class="fill-tit"> <span>原告</span><span>添加自然人</span><!-- <span>添加法人</span><b>本文来源gao@!dai!ma.com搞$$代^@码5网@</b> --><span>添加组织</span></div><div class="fill-center" id="plaintiff-list"> <!-- 原告自然人 --><div class="form-list"> <div class="fill-item"> <div class="fill-tit"> <span>原告（自然人）</span><div class="close"><i class="icon-close"></i></div></div><div class="fill-center">       男女             </div></div></div><!-- 原告自然人end --><!-- 原告组织 --><div class="form-list"> <div class="fill-item"> <div class="fill-tit"> <span>原告（组织）</span><div class="close"><i class="icon-close"></i></div></div><div class="fill-center">      </div></div></div><!-- 原告组织end --></div></div><div class="fill-item"> <div class="fill-tit"> <span>被告</span><span>添加自然人</span><!-- <span>添加法人</span> --><span>添加组织</span></div><div class="fill-center"> <!-- 被告自然人 --><div class="form-list"> <div class="fill-item"> <div class="fill-tit"> <span>被告（自然人）</span><div class="close"><i class="icon-close"></i></div></div><div class="fill-center">       男女             </div></div></div><!-- 被告自然人 --><!-- 被告组织 --><div class="form-list"> <div class="fill-item"> <div class="fill-tit"> <span>原告（组织）</span><div class="close"><i class="icon-close"></i></div></div><div class="fill-center">      </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><!--  --></div></div><div class="fill-item"> <div class="fill-tit"> <span>事实与理由</span></div><div class="fill-center"> <div id="div2"></div><!--  --></div></div></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"> <div class="form-group"> <div class="read-icon"> </div><div class="read-txt"> <p>请将居民二代身份证放在读卡处</p></div></div></div><!-- v2填单 -->

 <div> 添加产品     <el-input <pre></div><div class="gaodaimacode"><pre class="prettyprint linenums"> v-model="productNews[scope.$index].name 

 @focus="getAlert()">    删除</div>