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

2024-10-06 22:41:33

实例如下：

<%@ 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="https://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框的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue.js 实现输入框动态添加功能

代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &
Vue.js实现输入框绑定的实例代码

实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=
vuejs 动态添加input框的实例讲解

实例如下: <%@ 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" val
bootstrap里bootstrap动态加载下拉框的实例讲解

实例如下所示: //引入的包  <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t
ASP.NET实现级联下拉框效果实例讲解

用ASP.NET控件实现部门和员工的联动,参考过程如下效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199
javaScript动态添加Li元素的实例

html代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>**javaScript动态添加Li元素**</title> <style type="text/css"> ul li{list-style:none;display:block;text-align:left;} ul li span{displ
微信小程序动态添加view组件的实例代码

在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas
在react项目中使用antd的form组件,动态设置input框的值

问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide
动态添加LinearLayout的高度实例

实例如下: WindowManager wm = (WindowManager) getContext() .getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = (int) (width - 22*density) / 3; LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mL
Python SqlAlchemy动态添加数据表字段实例解析

本文研究的主要是Python SqlAlchemy动态添加数据表字段,具体如下. 我们知道使用SqlAlchemy创建类来映射数据表,类属性等于数据库字段,但有时候要在我们创建表的时候,不确定数据表字段数量,遇到这种情况,应如何解决? 先看常规用法 from sqlalchemy import create_engine,Column,String,Integer class Mybase(Base): #表名 __tablename__ ='mycars' #字段,属性 myid=Column
vue-router动态设置页面title的实例讲解

由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题. 但是在IOS APP里这种方式不起作用,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 解决方案是在路由切换完成之后,静默加载一个空的iframe动态设置title util.js中定义setMetaTitle()函数 function setMetaTitle(title) { d

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

相关推荐

随机推荐