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