Vue.js高效前端开发(页面验证跳转，查)

最新推荐文章于 2024-05-19 20:18:26 发布

W少年没有乌托邦

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量304

点赞数 3

分类专栏： Vue.js前端高效开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mr_wangzu/article/details/137559798

版权

Vue.js前端高效开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

代码：

new.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" v-model="userName"/><br>
			<input type="text" name="" id="" v-model="pwd"/><br>
			<button @click="cha()">跳转</button>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					userName:"1",
					pwd:"2"
					
				},
			methods:{
					cha:function(){
						
						if (this.userName=="admin"&&this.pwd=="123456") {
							location.href="./Seek.html"
						} else{
							console.log("登录失败")
						}		
						
						
					}
					
				}
				
				
				
			})
			
		</script>
			
			
			
	
		
		
	</body>
</html>

seek.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>异兽信息列表</h1>
		<div id="app">
			<input type="text" name="" id="" v-model="keyword">
			<table border="1">
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>攻击力</th>
					<th>简介</th>
				</tr>
				
				<tr v-for="(item,index) in relist.length>0?relist:shou" >		
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.gongjili}}</td>
						<td>{{item.jianjie}}</td>
				</tr>
				
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var Vue=new	Vue({
				el:"#app",
				data:{
					keyword:"",
					relist:[],
					shou:[{
						id:1,
						name:"困",
						gongjili:12,
						jianjie:"困是打怪兽"
					},
					{
						id:2,
						name:"食铁兽",
						gongjili:123,
						jianjie:"驱蚊器二群无的群多无群无多"
					},
					{
						id:3,
						name:"困",
						gongjili:1234,
						jianjie:"15气温气温气温耳热与法国代购"
					}
					]
					
					
					
				},
				 watch:{
				 	keyword:function(newVal,oldVal){
				
				 		var ret =this.shou.filter(m=>m.name.toString().includes(newVal.toString()));
				 		this.relist=ret;
				 	}
					
				 }
				
				
			})
			
			
			
		</script>
	</body>
</html>