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,页面,数据传值
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“VUE DEMO之模拟登录个人中心页面之间数据传值实例”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
20240516
20240516
- 刘欢.2004-经典20年珍藏锦集【新索】【WAV+CUE】
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- CD圣经上榜天碟1995-乌仁娜-《蒙古草原之歌》[WAV+CUE].
- 【电影原声】武满彻《旭日东升》1993[WAV+CUE整轨]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[320K/MP3][148.54MB]
- Taylor Swift《THE TORTURED POETS DEPARTMENT》[FLAC/分轨][405.72MB]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[320K/MP3][80.8MB]
- 女神异闻录5佐仓双叶coop攻略 p5r佐仓双叶对话选项攻略
- 【民谣】张智《尼勒克小镇》[FLAC]
- 林一峰2018-TRAVELOGUE4ESCAPE[香港首版][WAV+CUE]
- MollyLewis《OnTheLips》(2024)[Hi-Res96kHz_24bitFLAC]
- Joyce Jonathan《法式松弛感 漫步香榭丽舍》[FLAC/分轨][230.77MB]
- 群星《影视剧 春色寄情人 原声带》[320K/MP3][394.18MB]
- 吴牧野《强者独白II 李斯特巅峰作品选》[320K/MP3][216.01MB]
- 女神异闻录5御船千早coop攻略 p5r御船千早对话选项攻略