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


Posted in Javascript onAugust 24, 2018

实例如下:

<%@ 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>

效果图:

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

拓展知识: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框的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jQuery取id有.的值的方法
May 21 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
vue开发中遇到的问题总结
Apr 07 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 #Javascript
You might like
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
python根据路径导入模块的方法
2014/09/30 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python使用udp实现聊天器功能
2018/12/10 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python @property装饰器原理解析
2020/01/22 Python
python3爬虫中异步协程的用法
2020/07/10 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
五一家具促销方案
2014/01/10 职场文书
小学教师听课制度
2014/02/01 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
五年级学生评语大全
2014/12/26 职场文书
员工辞退通知书
2015/04/17 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
nginx之内存池的实现
2022/06/28 Servers