溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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">
<h4 class="red">登錄</h4>
用戶名：<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">
<h4 class="red">個人中心</h4>
<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之模擬登錄個人中心頁面之間數據傳值實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
