您的位置：首页 > 产品设计 > UI/UE

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

2017-12-26 10:16 441 查看

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 DEMO 之模拟登录个人中心页面之间数据传值