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