VUE DEMO之模拟登录个人中心页面之间数据传值实例
更新时间：2019年10月31日 11:44:26 作者：京城女女-
今天小编就为大家分享一篇VUE DEMO之模拟登录个人中心页面之间数据传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
lalala~ 先上代码吧：
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟登录成功并跳转页面</title>
<script src='vue.js'></script>
<style>
.red{
color:red;
}
.ddd{
color:#333;
font-size: 13px;
}
</style>
</head>
<body>
<div id="app">
<h3 class="red">登录</h3>
用户名：<input type="text" v-model='userinfo.username' ><br>
密码：<input type="password" v-model='userinfo.password' ><br>
<input type="submit" value="提交" @click='check'>
</div>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
userinfo:{
username:'',
password:'',
}
}
},
methods:{
check(){
if(this.userinfo.username != '' && this.userinfo.password != ''){
alert('恭喜您，登录成功');
//使用location 记录用户信息
if(!window.localStorage){
alert('您的浏览器不支持localStorage')
}else{
localStorage.setItem('userInfo',JSON.stringify(this.userinfo));
}
window.location.href='order.html'
}else{
alert('用户名或者密码不能为空')
}
}
}
})
</script>
</body>
</html>
order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟登录成功并跳转页面</title>
<script src='vue.js'></script>
<style>
.red{
color:red;
}
.ddd{
color:#333;
font-size: 13px;
}
</style>
</head>
<body>
<div id="app">
<h3 class="red">个人中心</h3>
<div>
你好：<span class="ddd">{{username}}</span><br>
您的密码是: <span class="ddd">{{password}}</span>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
username:'',
password:''
}
},
mounted(){
if(!window.localStorage){
alert('浏览器不支持localStorage');
}else{
var data1 = localStorage.getItem('userInfo');
var data2 = JSON.parse(data1);
this.username = data2.username;
this.password = data2.password;
}
}
})
</script>
</body>
</html>
分析其中运用的知识点：
1. vue v-model 指令，把表单的值和data数据绑定，双向数据绑定。
2. html5 window.localStorage 本地存储，用来存储用户信息（在实际项目中必须加密的，demo中没有去做）。
3. JSON.parse() 将JSON字符串转化成json格式
4. JSON.stringify() 将JSON转化成json字符串
以上这篇VUE DEMO之模拟登录个人中心页面之间数据传值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue+element-ui 实现表格的分页功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue插件使用方法详情分享，使用插件之前显示定义，下文通过js插件定义展开详细文章介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了web前端vue实现插值文本和输出原始html，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。2017-03-03
这篇文章主要为大家介绍了Vue3从0搭建Vite打包组件库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue3使用reactive包裹数组正确赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本篇文章主要介绍了详解Vue组件之间的数据通信实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了mpvue+vant app搭建微信小程序的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vueRouter--matcher之动态增减路由方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
这篇文章主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧2018-07-07
最新评论