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 > <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 > <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之模擬登錄個人中心頁面之間數據傳值實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網之家。
新聞熱點
疑難解答
