Mobile 我的Vue之旅、05 导航栏、登录、注册( 三 ) _生活百科

<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 关系

文章插图
配置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