今天小编就为大家分享一篇vuejs 动态添加input框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

实例如下：

    .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; }   
  
 信宜市人民法院智能诉状生成系统 XinYi People's Court Intelligent complaint generation system
 
      
实时预览
 打印参考模板   
普通诉讼
 原告：{{ list.plaintiffName }}，{{list.plaintiffSex}}， {{list.plaintiffAge}}岁， {{list.plaintiffNation}}，{{list.plaintiffAddress}}，身份证号码：{{list.plaintiffUserId}}，电话号码：{{list.plaintiffTel}}
 原告：{{ list.tissueName }}，代表人：{{ list.tissueUserName}}
 被告：{{ list.defendantName }}，{{list.defendantSex}}， {{list.defendantAge}}岁， {{list.defendantNation}}，{{list.defendantAddress}}，身份证号码：{{list.defendantUserId}}，电话号码：{{list.defendantTel}}
 被告：{{ list.tissueName }}，代表人：{{ list.tissueUserName}}
请求事项：
事实与理由：
此致
信宜市人民法院
具状人（签名或盖章）：
年 月 日
   
普通诉讼
 保存返回     原告添加自然人<!-- 添加法人 -->添加组织    原告（自然人）       男女                原告（组织）        被告添加自然人<!-- 添加法人 -->添加组织    被告（自然人）       男女                原告（组织）        请求事项 <!--  -->  事实与理由 <!--  --> 
 
原告
被告
请求事项
事实与理由
    
请将居民二代身份证放在读卡处

效果图：

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

  添加产品     <el-input 
 v-model="productNews[scope.$index].name 
 @focus="getAlert()">    删除
就是在输入框 中v-model 用一个数组productNews[scope.$index].manufacturer 然后添加时，数组下标加一，删除时，数组下标减一
以上这篇vuejs 动态添加input框的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是vuejs 动态添加input框的实例讲解的详细内容，更多请关注本站其它相关文章！