vue--练习（登录demo）

最新推荐文章于 2022-02-09 14:12:08 发布

guoxiaxing

最新推荐文章于 2022-02-09 14:12:08 发布

阅读量1k

点赞数 1

分类专栏：前端框架文章标签： Vue

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/80848798

版权

前端框架专栏收录该内容

23 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的Vue登录Demo展示了如何利用Vue.js进行表单交互和数据操作。主要内容包括使用v-model双向数据绑定，@click事件监听，以及如何实现数据的增删排序。同时，还涉及到了Vue实例的创建，数据对象的定义，以及methods中的submit、del和sort方法，用于添加数据、删除数据和按年龄排序。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<script src='jquery.min.js'></script>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src='vue.min.js'></script>
</head>
<body>
	<!-- 模板 将Vue的变量卸载{{}}中-->
	<div id='box'>
		<form action=''>
		  <div class="form-group">
		    <label for="exampleInputEmail1">姓名</label>
		    <input type="text" class="form-control" v-model='name'>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">年龄</label>
		    <input type="text" class="form-control" v-model='age'>
		  </div>
		</form>
		<button class="btn btn-success" @click='submit'>确定</button>
		 <button class="btn btn-primary" @click='sort'>按年龄排序</button>
		<table class='table table-bordered table-striped table-hover' style='text-align:center;'>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>选项</th>
			</tr>
			<tr v-for='(item,i) in people'>
				<!-- 序号最好用下标值，可以随着我们的删除而自动更新 -->
				<td>{{i+1}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>
					<button class="btn btn-danger btn-sm" @click='del(i)'>删除</button>
				</td>
			</tr>
			<tr v-show='people.length===0?true:false'>
				<td colspan="4">请输入数据</td>
			</tr>	
		</table>
	</div>
	<script>
		new Vue({
			el:'#box',
			data:{
				name:'',
				age:'',
				people:[]
			},
			methods:{
				submit(){
					this.people.push({
						name:this.name,
						age:this.age
					});
				},
				del(i){
					if(window.confirm('确认要删除吗？')){
						this.people.splice(i,1);
					}else{
						return;
					}
				},
				sort(){
					let len = this.people.length;
					for(var i=0;i<len;i++){
						for(var j=0;j<len-i-1;j++){
							if(Number(this.people[j]['age'])>Number(this.people[j+1]['age'])){
								// 注意：在这里用普通的元素交换时虽然people数组改变但是并不会重新渲染，故要用Vue.set()方法来强制渲染
								let temp = this.people[j];
								Vue.set(this.people,j,this.people[j+1]);
								Vue.set(this.people,j+1,temp);
							}
						}
					}
				}
			}
		});
	</script>
</body>

</html>