VUE DEMO 之模擬登入 個人中心頁面之間資料傳值
阿新 • • 發佈：2019-01-09
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 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字串