用vue和bootstrap实现用户登录页面

点击添加将上方用户输入的信息传入到表格中，点击表格中的增加按钮，在当前数据下方新添加一条数据，点击表格中的删除按钮，删除当前一条数据，当任何一个输入框为空时，弹出警示框提醒用户完善信息，当数据重复添加时，弹出警示框提醒用户数据重复。

 代码演示：

1.在头部分别引入vue和bootstrap文件

		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
		<script src="js/vue.js"></script>

 2.书写HTML样式

<div id="app">
			<div class="container">
				<form>
					<div class="form-group">
						<label for="name">用户名</label>
						<input id="name" type="text" class="form-control" placeholder="请输入用户名" v-model="name" />
					</div>

					<div class="form-group">
						<label for="name">密码</label>
						<input id="name" type="text" class="form-control" placeholder="请输入密码" v-model="pwd" />
						<small id="emailHelp" class="form-text text-muted">8-16个字符，至少1个大写字母，1个小写字母。</small>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect1">政治面貌</label>
						<select class="form-control" id="exampleFormControlSelect1" v-model="identity">
							<option>党员</option>
							<option>共青团员</option>
							<option>群众</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleInputEmail1">电子邮件地址</label>
						<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入电子邮件地址"
							   v-model="email" />
						<small id="emailHelp" class="form-text text-muted">我们绝不会与第三
							方共享您的电子邮件地址。</small>
					</div>
					<div class="form-group">

						<div class="form-group">
							性别：
							<input type="radio" name="exampleRadios" id="exampleRadios1" value="男" v-model="sex">
							<label class="form-check-label" for="exampleRadios1">男</label>
							<input type="radio" name="exampleRadios" id="exampleRadios2" value="女" v-model="sex">
							<label class="form-check-label" for="exampleRadios2">女</label>
						</div>
					</div>
					<button @click="add" class="btn btn-success">增加</button>
					<button @click="dl" class="btn btn-danger">全部删除</button>
					<hr />
					<table class="table table-bordered table-hover">
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>密码</th>
							<th>政治面貌</th>
							<th>邮箱</th>
							<th>性别</th>
							<th>操作</th>
						</tr>
						<tr v-for="(user,index) in users" :key="index">
							<td>{{index+1}}</td>
							<td>{{user.name}}</td>
							<td>{{user.pwd}}</td>
							<td>{{user.identity}}</td>
							<td>{{user.email}}</td>
							<td>{{user.sex}}</td>
							<td>
								<button class="btn btn-success" @click="update(index)">增加</button>
								<button class="btn btn-danger" @click="del(index)">删除</button>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>

3.实例化vue对象

var vm = new Vue( {
				el: '#app',
				data: {
					name: '',
					pwd: '',
					identity: '',
					email: '',
					sex: '',
					users: []
				}

4.增加按钮功能实现

输入框为空时弹出警示框提醒用户完善信息；数据相同时提醒用户数据重复

add ()
					{
						if ( this.name !== '' && this.pwd !== '' && this.identity !== '' && this.email !== '' && this.sex !== '' )
						{
							var index = this.users.findIndex( a => a.name == this.name );
							var index1 = this.users.findIndex( a => a.pwd == this.pwd );
							var index2 = this.users.findIndex( a => a.identity == this.identity );
							var index3 = this.users.findIndex( a => a.email == this.email );
							var index4 = this.users.findIndex( a => a.sex == this.sex );
							if ( index !== -1 && index1 !== -1 && index2 !== -1 && index3 !== -1 && index4 !== -1 )
							{
								alert( '用户已存在' )
							} else
							{
								this.users.push( {
									name: this.name,
									pwd: this.pwd,
									identity: this.identity,
									email: this.email,
									sex: this.sex
								} )
							}
						} else
						{
							alert( '请完善资料' )
						}

					}

5.表格增加按钮功能实现

update ( index )
					{
						if ( this.name !== '' && this.pwd !== '' && this.identity !== '' && this.email !== '' && this.sex !== '' )
						{
							var index = this.users.findIndex( a => a.name == this.name );
							var index1 = this.users.findIndex( a => a.pwd == this.pwd );
							var index2 = this.users.findIndex( a => a.identity == this.identity );
							var index3 = this.users.findIndex( a => a.email == this.email );
							var index4 = this.users.findIndex( a => a.sex == this.sex );
							if ( index !== -1 && index1 !== -1 && index2 !== -1 && index3 !== -1 && index4 !== -1 )
							{
								alert( '用户已存在' )
							} else
							{
								this.users.splice( index + 1, 0, {
									name: this.name,
									pwd: this.pwd,
									identity: this.identity,
									email: this.email,
									sex: this.sex
								} )
							}
						} else
						{
							alert( '请完善资料' )
						}
					}

6.全部删除按钮功能实现

直接使数组为空即可

dl ()
					{
						this.users = []
					}

7.表格删除按钮实现

del ( index )
					{
						this.users.splice( index, 1 )
					}

完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<div class="container">
				<form>
					<div class="form-group">
						<label for="name">用户名</label>
						<input id="name" type="text" class="form-control" placeholder="请输入用户名" v-model="name" />
					</div>

					<div class="form-group">
						<label for="name">密码</label>
						<input id="name" type="text" class="form-control" placeholder="请输入密码" v-model="pwd" />
						<small id="emailHelp" class="form-text text-muted">8-16个字符，至少1个大写字母，1个小写字母。</small>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect1">政治面貌</label>
						<select class="form-control" id="exampleFormControlSelect1" v-model="identity">
							<option>党员</option>
							<option>共青团员</option>
							<option>群众</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleInputEmail1">电子邮件地址</label>
						<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入电子邮件地址"
							   v-model="email" />
						<small id="emailHelp" class="form-text text-muted">我们绝不会与第三
							方共享您的电子邮件地址。</small>
					</div>
					<div class="form-group">

						<div class="form-group">
							性别：
							<input type="radio" name="exampleRadios" id="exampleRadios1" value="男" v-model="sex">
							<label class="form-check-label" for="exampleRadios1">男</label>
							<input type="radio" name="exampleRadios" id="exampleRadios2" value="女" v-model="sex">
							<label class="form-check-label" for="exampleRadios2">女</label>
						</div>
					</div>
					<button @click="add" class="btn btn-success">增加</button>
					<button @click="dl" class="btn btn-danger">全部删除</button>
					<hr />
					<table class="table table-bordered table-hover">
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>密码</th>
							<th>政治面貌</th>
							<th>邮箱</th>
							<th>性别</th>
							<th>操作</th>
						</tr>
						<tr v-for="(user,index) in users" :key="index">
							<td>{{index+1}}</td>
							<td>{{user.name}}</td>
							<td>{{user.pwd}}</td>
							<td>{{user.identity}}</td>
							<td>{{user.email}}</td>
							<td>{{user.sex}}</td>
							<td>
								<button class="btn btn-success" @click="update(index)">增加</button>
								<button class="btn btn-danger" @click="del(index)">删除</button>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<script>
			var vm = new Vue( {
				el: '#app',
				data: {
					name: '',
					pwd: '',
					identity: '',
					email: '',
					sex: '',
					users: []
				},
				methods: {
					add ()
					{
						if ( this.name !== '' && this.pwd !== '' && this.identity !== '' && this.email !== '' && this.sex !== '' )
						{
							var index = this.users.findIndex( a => a.name == this.name );
							var index1 = this.users.findIndex( a => a.pwd == this.pwd );
							var index2 = this.users.findIndex( a => a.identity == this.identity );
							var index3 = this.users.findIndex( a => a.email == this.email );
							var index4 = this.users.findIndex( a => a.sex == this.sex );
							if ( index !== -1 && index1 !== -1 && index2 !== -1 && index3 !== -1 && index4 !== -1 )
							{
								alert( '用户已存在' )
							} else
							{
								this.users.push( {
									name: this.name,
									pwd: this.pwd,
									identity: this.identity,
									email: this.email,
									sex: this.sex
								} )
							}
						} else
						{
							alert( '请完善资料' )
						}

					},
					dl ()
					{
						this.users = []
					},
					del ( index )
					{
						this.users.splice( index, 1 )
					},
					update ( index )
					{
						if ( this.name !== '' && this.pwd !== '' && this.identity !== '' && this.email !== '' && this.sex !== '' )
						{
							var index = this.users.findIndex( a => a.name == this.name );
							var index1 = this.users.findIndex( a => a.pwd == this.pwd );
							var index2 = this.users.findIndex( a => a.identity == this.identity );
							var index3 = this.users.findIndex( a => a.email == this.email );
							var index4 = this.users.findIndex( a => a.sex == this.sex );
							if ( index !== -1 && index1 !== -1 && index2 !== -1 && index3 !== -1 && index4 !== -1 )
							{
								alert( '用户已存在' )
							} else
							{
								this.users.splice( index + 1, 0, {
									name: this.name,
									pwd: this.pwd,
									identity: this.identity,
									email: this.email,
									sex: this.sex
								} )
							}
						} else
						{
							alert( '请完善资料' )
						}
					}
				}

			} )
		</script>
	</body>

</html>