& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>模拟登录成功并跳转页面& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt; style>
r {
颜色:红色;
}
.ddd {
颜色:# 333;
字体大小:13 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; h4类=昂焐痹诟鋈酥行? lt;/h4>
& lt; div>
你好:& lt;跨类=" ddd”在{{username}} & lt;/span> & lt; br>
您的密码是:& lt;跨类=癲dd”在{{密码}}& lt;/span>
& lt;/div>
& lt;/div>
& lt; script>
让vm=new Vue ({
埃尔:“#应用”,
数据(){
返回{
用户名:”,
密码:"
}
},
安装(){
如果(! window.localStorage) {
alert('浏览器不支持localStorage”);
其他}{
var data1=localStorage.getItem(“用户信息”);
var data2=JSON.parse (data1);
这一点。用户名=data2.username;
这一点。密码=data2.password;
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
1。vue v模型指令,把表单的值和数据数据绑定,双向数据绑定。
2。html5窗口。localStorage本地存储,用来存储用户信息(在实际项目中必须加密的,演示中没有去做)。
3。JSON.parse()将JSON字符串转化成JSON格式
4。JSON.stringify()将JSON转化成JSON字符串
以上这篇VUE演示之模拟登录个人中心页面之间数据传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
