Vue实现注册页面的用户交互详解

 更新时间:2023年12月08日 13:51:34   作者:听风与他  
这篇文章主要为大家详细介绍了Vue实现注册页面的用户交互的相关知识,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,需要的小伙伴可以参考下

Vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin:0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        } 
        .subTitle {
            color:gray;
            font-size: 14px;
        }  
        .title {
            font-size: 45px;  
        }
        .input {
            width: 90%;
        }
        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }
        .subContainer {
            text-align: left;
        }
        .field {
            font-size: 14px;
        }
        .input {
            border-radius: 6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }
        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }
        .setting {
            font-size: 9px;
            color: black;
        }
        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align:middle;
        }
        .checkbox {
            height: 20px;
            vertical-align:middle;
        }
        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container" id="Application">
        <div class="container">
            <div class="subTitle">加入我们,一起创造美好世界</div>
            <h1 class="title">创建你的账号</h1>
            <div v-for="(item, index) in fields" class="inputContainer">
                <div class="field">{{item.title}} 
                    <span v-if="item.required" style="color: red;">*</span></div>
                <input v-model="item.model" class="input" :type="item.type" />
                <div class="tip" v-if="index == 2">请确认密码程度需要大于6位</div>
            </div>
            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input v-model="receiveMsg" class="checkbox" type="checkbox" /><label class="label">接收更新邮件</label>
            </div>
            <button @click="createAccount" class="btn">创建账号</button>
        </div>
    </div>
    <script>
        const App = {
            data(){
                return{
                    fields:[
                        {
                            title:'用户名',
                            required:true,
                            type:'text',
                            model:''//与输入框双向绑定的数据
                        },
                        {
                            title:'邮箱地址',
                            required:false,
                            type:'text',
                            model:''//与输入框双向绑定的数据
                        },{
                            title:'密码',
                            required:true,
                            type:'password',
                            model:''//与输入框双向绑定的数据
                        }
                    ],
                    receiveMsg:false
                }
            },
            computed:{
                //定义"账号"计算属性,获取值与设置值时同步映射到data中具体的存储属性
                name:{
                    get(){
                        return this.fields[0].model
                    },
                    set(value){
                        this.fields[0].model = value
                    }
                },
                //定义"邮箱"计算属性,获取值与设置值时同步映射到data中具体的存储属性
                email:{
                    get(){
                        return this.fields[1].model
                    },
                    set(value){
                        this.fields[1].model = value
                    }
                },
                password:{
                    get(){
                        return this.fields[2].model
                    },
                    set(value){
                        this.fields[2].model = value
                    }
                },
            },
            methods:{
                //检查邮箱格式是否正确
                emailCheck(){
                    var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                    if(!verify.test(this.email)){
                        return false
                    }else{
                        return true
                    }
                },
                //模拟业务上的注册操作
                createAccount(){
                    if(this.name.length == 0){
                        alert('请输入用户名')
                        return
                    }else if(this.password.length <= 6){
                        alert('密码设置需要大于6位字符')
                        return
                    }else if(this.email.length > 0 && !this.emailCheck(this.email)){
                        alert('请输入正确的邮箱')
                        return
                    }
                    alert('注册成功')
                    console.log(`name:${this.name}\npassword:${this.password}\nemail:${this.email}\nreceiveMsg:${this.receiveMsg}`)
                }
            }
        }
        Vue.createApp(App).mount("#Application") 
    </script>
</body>
</html>

实现效果

控制台上打印注册信息

到此这篇关于Vue实现注册页面的用户交互详解的文章就介绍到这了,更多相关Vue注册页面用户交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2中less的安装以及使用教程

    vue2中less的安装以及使用教程

    less是css预处理器,对原先css进行了扩展和补充,下面这篇文章主要给大家介绍了关于vue2中less的安装以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue执行方法,方法获取data值,设置data值,方法传值操作

    Vue执行方法,方法获取data值,设置data值,方法传值操作

    这篇文章主要介绍了Vue执行方法,方法获取data值,设置data值,方法传值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 浅谈VUE uni-app 条件编码和页面布局

    浅谈VUE uni-app 条件编码和页面布局

    这篇文章主要介绍了uni-app 的条件编码和页面布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • Vue数字输入框组件使用方法详解

    Vue数字输入框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue数字输入框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法

    Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法

    最近在项目中使用 webpack 打包后升级,用户反馈使用浏览器(chrome 45)访问白屏。经过排查发现:由于 chrome 45 无法兼容 ES6 语法导致的,接下来给大家介绍下Vue中 引入使用 babel-polyfill 兼容低版本浏览器方法,需要的朋友可以参考下
    2023-02-02
  • Vue项目创建首页发送axios请求的方法实例

    Vue项目创建首页发送axios请求的方法实例

    这篇文章主要给大家介绍了关于Vue项目创建首页发送axios请求的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了vue.js开发环境的搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue几个常用跨域处理方式介绍

    vue几个常用跨域处理方式介绍

    本篇文章给大家详细介绍了vue跨域处理问题的方式以及相关知识点介绍,对此有兴趣的朋友学习下。
    2018-02-02
  • vue+element实现手机号验证码注册的示例

    vue+element实现手机号验证码注册的示例

    本文主要介绍了vue+element实现手机号验证码注册的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue父组件向子组件(props)传递数据的方法

    vue父组件向子组件(props)传递数据的方法

    这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
    2018-01-01

最新评论