<divclass="login-register-input w-2/6 text-center":class="changeGetCodeColor">获取验证码</div>
computed: {changeGetCodeColor(): string {if (this.phone == "") {return "text-gray-400";} else {return "text-pink-400";}},},
完整代码<template><div class="container bg-gray-100 absolute inset-0"><div class="box-border bg-white border-b-1 border-b-black h-16 p-2"><router-link :to="{ name: 'home' }" custom v-slot="{ navigate }"><b-icon-arrow-left-shortclass="inline-block text-4xl align-middle mr-3 mt-2"@click="navigate"/></router-link><span class="text-xl absolute top-5">手机号登录注册</span><router-link :to="{ name: 'login' }" custom v-slot="{ navigate }"><spanclass="text-lg absolute right-4 top-5 text-gray-500"@click="navigate">密码登录</span></router-link></div><divclass="bg-cover bg-center h-24 shadow-inner":style="{'background-image': 'url(' + banner + ')',}"></div><div><select id="countries" class="login-register-input w-full border-y"><option selected value="https://www.huyubaike.com/biancheng/CN">中国大陆</option><option value="https://www.huyubaike.com/biancheng/US">美国</option><option value="https://www.huyubaike.com/biancheng/CA">加拿大</option><option value="https://www.huyubaike.com/biancheng/FR">法国</option><option value="https://www.huyubaike.com/biancheng/DE">德国</option></select></div><div class="border-b"><div class="login-register-input w-1/6">+86</div><inputid="phone"class="login-register-input w-3/6"type="text"placeholder="请输入手机号码"v-model="phone"/><divclass="login-register-input w-2/6 text-center":class="changeGetCodeColor">获取验证码</div></div><div class="border-b"><div class="login-register-input w-1/6">验证码</div><inputid="code"class="login-register-input w-5/6"type="text"placeholder="请输入验证码"@focusin="changeIMG('4.png')"@focusout="changeIMG('3.png')"/></div><div class="text-center pt-6"><button type="button" class="login-register-solid-button w-11/12">验证登录</button></div><div class="text-center pt-4"><div class="flex items-center align-top"><inputid="link-checkbox"type="checkbox"value=""class="login-register-checkbox"/><labelfor="link-checkbox"class="ml-2text-smfont-mediumtext-gray-500dark:text-gray-300text-left">我已阅读并同意<ahref="https://www.huyubaike.com/biancheng/#"class="text-blue-600 dark:text-blue-500 hover:underline">用户协议</a>和<ahref="https://www.huyubaike.com/biancheng/#"class="text-blue-600 dark:text-blue-500 hover:underline">隐私政策</a>,未注册绑定的手机号验证成功后将自动注册</label></div></div><div class="text-center pt-6"><labelclass="ml-2text-smfont-mediumtext-gray-500dark:text-gray-300text-left">遇到问题?<ahref="https://www.huyubaike.com/biancheng/#"class="text-blue-600 dark:text-blue-500 hover:underline">查看帮助</a></label></div></div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({name: "RegisterView",components: {},data() {return {banner: require("../assets/3.png"),phone: "",};},methods: {changeIMG(src: string): void {this.banner = require(`../assets/${src}`);},},computed: {changeGetCodeColor(): string {if (this.phone == "") {return "text-gray-400";} else {return "text-pink-400";}},},mounted() {this.$emit("set-bottom-flag", false);},});</script>
一些零散的知识补充Module not found: Error: Can't resolve 'sass-loader'
Module not found: Error: Can't resolve 'sass-loader'解决方法: 运行如下命令后重新启动服务
npm install sass-loader -Dnpm install node-sass -D
声明式、命令式命令式UI:构建全功能UI实体,然后在UI更改时使用方法对其进行变更 。声明式UI:描述当前的UI状态 , 并且不需要关心它是如何过渡到框架的 。
TS、ECMA、JS 关系
![Mobile 我的Vue之旅、05 导航栏、登录、注册](http://img.zhejianglong.com/231017/1Q4503554-4.png)
文章插图
配置NPM镜像
npm config set registry=http://registry.npm.taobao.org
初试TSvar hello = "hello world"console.log(hello)
npm install -g typescripttsc helloworld ::编译tsnode helloworld ::运行js
变量提升当使用var声明一个变量的时候,该变量会被提升到作用域的顶端 , 但是赋值的部分并不会被提升 。console.log(hello)var hello = "hello world"
而let、const不会 , 实际开发中建议尽量使用用 let 和 const 代替var 。好用的网站Tailwind CSS Select / Listbox Form - Free Examples (tailwind-elements.com)
Tailwind CSS Flowbite
推荐阅读
- Vue实现拖拽穿梭框功能四种方式
- 我的 Kafka 旅程 - Consumer
- 我的父亲作文600字初中作文 关于我的父亲写人作文600字
- 我的老父亲优秀学生作文5篇
- 我的父亲作文600字初中优秀作文 我的父亲初二优秀作文600字范文
- 我的父亲600字优秀作文初中 描写我的父亲初中600字作文
- 我的世界手机版紫珀台阶怎么获得
- 关于朋友圈的句子短句子 发朋友圈的句子短句子
- 主播感谢守护的句子 感谢守护我的句子
- qq查看特别关心我的人数 qq查看特别关心我的人