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注册页面用户交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue执行方法,方法获取data值,设置data值,方法传值操作
这篇文章主要介绍了Vue执行方法,方法获取data值,设置data值,方法传值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法
最近在项目中使用 webpack 打包后升级,用户反馈使用浏览器(chrome 45)访问白屏。经过排查发现:由于 chrome 45 无法兼容 ES6 语法导致的,接下来给大家介绍下Vue中 引入使用 babel-polyfill 兼容低版本浏览器方法,需要的朋友可以参考下2023-02-02
最新评论