VUE DEMO之模拟登录个人中心页面之间数据传值实例
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇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之模拟登录个人中心页面之间数据传值实例就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- socket网络编程 socket网络编程Socket基础
- 少儿编程培训班 少儿编程培训班教学方法
- linux系统编程:Linux系统编程多线程基础
- unix环境高级编程 首发于 UNIX环境高级编程学习之
- 学编程学哪一种比较好 初学者哪种编程语言比较
- 学PLC编程学费多少
- 计算机编程入门 学计算机编程入门的初学指南
- 世界编程语言排行榜
- vba编程培训:Excel VBA编程培训初学者教程
- 少儿编程课程:少儿编程学什么及各年龄段如何
- 游戏编程入门:少儿游戏编程入门的技巧
- 学编程哪个培训机构好 编程培训机构哪个好
- 编程机器人加盟 机器人编程加盟哪家好
- 在线少儿编程机构排名
- 电脑编程入门自学
- 服务器系统下载:服务器系统的安装