【HTML+CSS+JavaScript+Bootstrap+Vue】登录（获取表单数据）

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_30876945

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量732

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/neymargoal/p/9518250.html

版权

需求：登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
    
    </style>
</head>
<body>

    <div id="app">
        <div class="container">
            <div class="page-header">
                <h1>表单提交</h1>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <form @submit.prevent="">
                        <div class="form-group">
                            <label for="#">用户名</label>
                            <input type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">
                        </div>

                        <div class="form-group">
                            <label for="#">密码</label>
                            <input type="password" class="form-control" v-model="loginData.pwd">
                        </div>

                        <div class="checkbox">
                            <label for="#">
                                <input type="checkbox" v-model="loginData.remember"> 记住密码
                            </label>
                        </div>

                        <button class="btn btn-success btn-block" @click="login()">登 录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    

    <script src="../dist/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data: {
                loginData: {
                    username:'',
                    pwd:'',
                    remember: true
                }
            },
            methods: {
                login() {
                    //获取所哟表单的值
                    console.log(this.loginData)
                }
            }
        })
    </script>
</body>
</html>