Vue.js页面验证跳转功能实现
更新时间：2024年04月13日 11:37:30 作者：W少年没有乌托邦
这篇文章主要介绍了Vue.js页面验证跳转功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
效果图
代码：
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" 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:"驱蚊器二群无的群多无群无多"
},
{
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>到此这篇关于Vue.js高效前端开发(页面验证跳转，查)的文章就介绍到这了,更多相关Vue.js页面验证跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue中的百度地图定位BMap.GeolocationControl的用法
BMap.GeolocationControl 是百度地图API中的一个类,用于添加地理定位控件到地图上,以便用户可以通过该控件获取自己的当前位置,本文给大家介绍Vue中的百度地图定位BMap.GeolocationControl的用法,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了手写Vue2.0 数据劫持的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
这篇文章主要介绍了vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
数据代理是什么？通过一个对象代理，对另一个对象中属性的操作，简单就是说：可以通过 对象b 对 对象a 中的属性进行操作，这里我学到的数据代理是用Object.defineProperty这个方法进行操作2022-11-11
这篇文章主要为大家详细介绍了Mint UI实现A-Z字母排序的城市选择列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了在vue中实现动态设置元素的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了详解.vue文件中监听input输入事件（oninput），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下2023-11-11
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
这篇文章主要介绍了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法,结合实例形式详细分析了VUE使用JS修改html对象的值导致没有更新到数据的原因与解决方法,需要的朋友可以参考下2019-12-12
本篇文章主要介绍了vue多种弹框的弹出形式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论