VUE DEMO之模拟登录个人中心页面之间数据传值实例
时间：2021-02-10 14:52:21|栏目：vue|点击： 次
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-router和vue-cli以及组件之间的传值
栏 目：vue
本文标题：VUE DEMO之模拟登录个人中心页面之间数据传值实例
本文地址：http://www.codeinn.net/misctech/60639.html
