VUE DEMO 之模拟登录个人中心页面之间数据传值

创建时间：2017-12-26 投稿人：浏览次数：438

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字符串

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

热门文章: CTF writeup 2_南邮网络攻防训...; SSM框架——详细整合教程（...; Linux Shell脚本编程－－curl命...; HttpClient使用详解; Java面试题全集（上）; JAVA设计模式之单例模式; java.lang.OutOfMemoryError: PermGen ...; TCP协议中的三次握手和四次...; form表单的两种提交方式，su...; String,StringBuffer与StringBuilder...

最新文章: Java之品优购课程讲义_day20（7）; 剑指 Offer - 8：跳台阶; Netty权威指南_札记02_NIO编程; mysql时间属性之时间戳和datetime之...; 虚拟现实或许可以拯救古埃及的“...; spring cloud服务注册中心eureka---集群...; Java SE 第六章; HTTP请求+数据库; HIDL学习笔记之HIDL C++（第二天）; ubuntu系统下指定tomcat运行时为JDK1.8...

VUE DEMO 之模拟登录 个人中心页面之间数据传值

VUE DEMO 之模拟登录个人中心页面之间数据传值