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字串
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
