快捷導(dǎo)航

Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn)

更新時(shí)間：2024年04月13日 11:37:30 作者：W少年沒(méi)有烏托邦

這篇文章主要介紹了Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

效果圖

代碼：

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()">跳轉(zhuǎn)</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" rel="external nofollow" 
						} 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>編號(hào)</th>
					<th>名稱(chēng)</th>
					<th>攻擊力</th>
					<th>簡(jiǎn)介</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:"驅(qū)蚊器二群無(wú)的群多無(wú)群無(wú)多"
					},
					{
						id:3,
						name:"困",
						gongjili:1234,
						jianjie:"15氣溫氣溫氣溫耳熱與法國(guó)代購(gòu)"
					}
					]
				},
				 watch:{
				 	keyword:function(newVal,oldVal){
				 		var ret =this.shou.filter(m=>m.name.toString().includes(newVal.toString()));
				 		this.relist=ret;
				 	}
				 }
			})
		</script>
	</body>
</html>

到此這篇關(guān)于Vue.js高效前端開(kāi)發(fā)(頁(yè)面驗(yàn)證跳轉(zhuǎn)，查)的文章就介紹到這了,更多相關(guān)Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時(shí)，多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
解決vue3打包過(guò)后空白頁(yè)面的情況
這篇文章主要介紹了解決vue3打包過(guò)后空白頁(yè)面的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue實(shí)現(xiàn)英文字母大小寫(xiě)在線轉(zhuǎn)換功能
在Web開(kāi)發(fā)中,字符串處理是常見(jiàn)的需求之一,特別是在國(guó)際化應(yīng)用中,對(duì)于文本的格式化處理尤為重要,本文將介紹如何使用Vue.js來(lái)構(gòu)建一個(gè)簡(jiǎn)單的在線英文字母大小寫(xiě)轉(zhuǎn)換工具,需要的朋友可以參考下
2024-09-09
Vue ECharts直角坐標(biāo)系配置詳細(xì)講解
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過(guò)程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)
2022-12-12
Vue商品控件與購(gòu)物車(chē)聯(lián)動(dòng)效果的實(shí)例代碼
這篇文章主要介紹了Vue商品控件與購(gòu)物車(chē)聯(lián)動(dòng)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
Vue實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算總價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
詳解無(wú)限滾動(dòng)插件vue-infinite-scroll源碼解析
這篇文章主要介紹了詳解無(wú)限滾動(dòng)插件vue-infinite-scroll源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
uni-app進(jìn)階使用技巧分享
uni-app是一款基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開(kāi)發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下
2023-06-06
Vue.js 60分鐘快速入門(mén)教程
vuejs是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。今天給大家分享一篇教程關(guān)于Vue.js 60分鐘快速入門(mén)教程，一起看看吧
2017-03-03