VUE DEMO之模拟登录个人中心页面之间数据传值实例

时间：2021-05-26

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之模拟登录个人中心页面之间数据传值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章