【技术实战】Vue技术实战【三】

转载作者：我是一只小鸟更新时间：2023-07-27 06:31:12

需求实战一

效果展示

代码展示

                        
                          <template>
    <div style="display: flex;">
        <div style="display: flex; justify-content: center; align-items: center;">
            <label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
        </div>
        &nbsp
        &nbsp
        &nbsp
        <div>
            <a-input id="input" v-model:value="value" placeholder="请输入姓名" class="custom-input" />

        </div>
    </div>
</template>
<script setup lang="ts">
const value = ref<string>('');
</script>
<style scoped>
:deep(.custom-input) {
    border: 1px solid gray;
    width:250px;
    border-radius: 10px;
    padding: 8px;
}
:deep(label) {
    margin-right: 10px;
}
</style>

代码解释

这段代码是一个Vue组件的模板部分，用于创建一个包含姓名输入框的表单。

在模板中，使用了Flex布局来将姓名标签和输入框放在同一行。姓名标签使用了<label>元素，并设置了字体样式。输入框使用了<a-input>元素，并绑定了value属性，通过v-model指令实现双向数据绑定。输入框还设置了占位符文本和自定义样式类名。

在脚本部分，使用了ref函数创建了一个名为value的响应式数据，用于存储输入框的值。

在样式部分，使用了:deep伪类选择器来选择嵌套的元素，并设置了输入框和标签的样式，包括边框、宽度、边框半径和内边距等。

这段代码可以用于在Vue项目中创建一个带有姓名输入框的表单组件。

需求实战二

效果展示

代码展示

                        
                          <template>
<div>
    <div style="display: flex;">
        <div style="display: flex; justify-content: center; align-items: center;">
            <label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
        </div>
        &nbsp
        &nbsp
        &nbsp
        <div style="display: flex;">
            <a-input id="input" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
            &nbsp
            &nbsp
            &nbsp
            <a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
        </div>
    </div>
    <br>
    <br>
    <div style="display: flex;">
        <div style="display: flex; justify-content: center; align-items: center;">
            <label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
        </div>
        &nbsp
        &nbsp
        &nbsp
        <div style="display: flex;">
            <a-input id="input" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
            &nbsp
            &nbsp
            &nbsp
            <a-alert v-if="age === ''" type="error" message="年龄为必须输入选项" show-icon />
        </div>
    </div>
   </div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
</script>
<style scoped>
:deep(.custom-input) {
    border: 1px solid gray;
    width:250px;
    border-radius: 10px;
    padding: 8px;
}
:deep(label) {
    margin-right: 10px;
}
</style>

代码解释

这段代码是一个Vue组件的模板，用于创建一个包含姓名和年龄输入框的表单。以下是代码的解释：

- 在模板的顶部，我们使用了<div>元素来包裹整个表单。

- 表单中的每个输入框都被包裹在一个<div>元素中，并使用display: flex来实现水平排列。

- 每个输入框都由一个<label>元素和一个<a-input>元素组成。

- <label>元素用于显示输入框的标签，例如"姓名"和"年龄"。

- <a-input>元素是一个自定义的输入框组件，通过v-model:value指令将输入框的值与Vue实例中的name和age变量进行双向绑定。

- 输入框的样式通过.custom-input类进行自定义，包括边框、宽度、边框半径和内边距。

- 如果输入框的值为空，将显示一个错误提示框<a-alert>，提示用户该字段为必填项。

在<script setup>部分，我们使用了Vue 3的新特性<script setup>，它允许我们以更简洁的方式编写组件的逻辑部分。在这里，我们使用ref函数创建了name和age的响应式变量。

最后，<style scoped>部分定义了组件的样式，其中:deep()选择器用于选择组件内部的元素，并对其应用样式。在这里，我们为.custom-input类和<label>元素定义了一些样式。scoped属性表示这些样式仅适用于当前组件。

需求实战三

效果展示

代码展示

                          
                            <template>
    <div>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="input" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="input" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="input" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-if="age === ''" type="error" message="年龄为必须输入选项" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <a-button type="primary" @click="submit">确认</a-button>
                &nbsp
                &nbsp
                &nbsp
                <a-button type="primary" @click="clear">清空</a-button>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div v-show="judge" >
            <div style="justify-content: center; align-items: center;text-align:center">
                姓名：{{name}}
            </div>
            <br>
            <div style="justify-content: center; align-items: center;text-align:center">
                年龄：{{age}}

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
const judge =ref<boolean>(false);

const submit = () => {
    judge.value=true;
}

const clear = () => {
    judge.value=false;
    age.value='';
    name.value='';
}
</script>
<style scoped>
:deep(.custom-input) {
    border: 1px solid gray;
    width:250px;
    border-radius: 10px;
    padding: 8px;
}
:deep(label) {
    margin-right: 10px;
}
</style>

代码解释

这段代码是一个简单的Vue组件，用于展示一个表单，包括姓名和年龄的输入框以及确认和清空按钮。下面是代码的解释：

1. 在模板中，使用了flex布局来排列元素。首先是姓名输入框和错误提示的部分，然后是年龄输入框和错误提示的部分，最后是确认和清空按钮的部分。

2. 使用了<a-input>组件来创建输入框，通过v-model:value指令将输入框的值与name和age变量进行双向绑定。placeholder属性设置了输入框的占位符文本，class属性设置了输入框的样式，show-word-limit属性设置了是否显示字数限制。

3. 使用了<a-alert>组件来显示错误提示。通过v-if指令判断name和age是否为空，如果为空则显示错误提示。type属性设置了错误提示的类型为error，message属性设置了错误提示的文本内容，show-icon属性设置了是否显示错误提示的图标。

4. 使用了<a-button>组件来创建确认和清空按钮。通过@click事件监听按钮的点击事件，分别调用submit和clear方法。

5. 在<div v-show="judge">中，使用了v-show指令来根据judge变量的值来控制元素的显示和隐藏。当judge为true时，显示姓名和年龄的值。

6. 在<script setup>中，使用了Vue 3的新特性<script setup>来编写组件的逻辑部分。通过ref函数创建了name、age和judge的响应式变量。

7. submit方法用于确认按钮的点击事件，将judge的值设置为true，从而显示姓名和年龄的值。

8. clear方法用于清空按钮的点击事件，将judge的值设置为false，同时将age和name的值清空。

9. 在<style scoped>中，使用了scoped属性来限定样式的作用范围。使用:deep()伪类选择器来选择子组件的样式，设置了输入框和标签的样式。

需求实战四

效果展示

代码展示

                            
                              <template>
    <div>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="nameInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="nameInput" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
                <a-alert v-if="name !== '' && !isValidName" type="error" message="姓名不允许输入数字和特殊符号" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="ageInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="ageInput" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-show="age === ''" type="error" message="年龄为必须输入选项" show-icon />
                <a-alert v-show="age !== '' && !isValidAge" type="error" message="年龄只允许输入数字" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <a-button type="primary" @click="submit">确认</a-button>
                <a-modal v-model:visible="visible" title="输入不符合要求" @ok="close">
                    <p>您的输入不符合要求</p>
                    <p>请确认姓名不允许输入数字和特殊符号</p>
                    <p>请确认年龄只允许输入数字</p>
                </a-modal>
                &nbsp
                &nbsp
                &nbsp
                <a-button type="primary" @click="clear">清空</a-button>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div v-show="judge" >
            <div style="justify-content: center; align-items: center;text-align:center">
                姓名：{{name}}
            </div>
            <br>
            <div style="justify-content: center; align-items: center;text-align:center">
                年龄：{{age}}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
const judge = ref<boolean>(false);
const visible = ref<boolean>(false);

const isValidName = computed(() => {
    const regex = /^[^\d\W]+$/;
    return regex.test(name.value);
});

const isValidAge = computed(() => {
    const regex = /^\d+$/;
    return regex.test(age.value);
});

const close =()=>{
    visible.value=false;
}
const submit = () => {
    if (!isValidName.value || !isValidAge.value) {
        visible.value = true;
    } else {
        visible.value = false;
        judge.value = true;
    }
}

const clear = () => {
    judge.value = false;
    age.value = '';
    name.value = '';
}
</script>
<style scoped>
:deep(.custom-input) {
    border: 1px solid gray;
    width: 250px;
    border-radius: 10px;
    padding: 8px;
}
:deep(label) {
    margin-right: 10px;
}
</style>

代码解释

这段代码是一个Vue组件，用于实现一个简单的表单输入和验证功能。下面是代码的解释：

1. 首先定义了三个响应式变量：name、age和judge。name和age分别用于存储输入的姓名和年龄，judge用于控制是否显示输入结果。

2. 使用computed属性isValidName和isValidAge来进行姓名和年龄的验证。isValidName使用正则表达式来判断姓名是否只包含字母，不包含数字和特殊符号；isValidAge使用正则表达式来判断年龄是否只包含数字。

3. 定义了一个visible变量，用于控制模态框的显示和隐藏。

4. close函数用于关闭模态框，将visible设置为false。

5. submit函数用于提交表单。如果姓名或年龄不符合要求，则将visible设置为true，显示模态框；否则将visible设置为false，将judge设置为true，显示输入结果。

6. clear函数用于清空表单和输入结果，将judge设置为false，将name和age清空。

7. 在模板中，使用a-input组件实现输入框，v-model绑定name和age的值，placeholder设置输入框的提示文字。使用a-alert组件来显示错误提示信息，根据条件判断是否显示。

8. 使用a-button组件实现确认和清空按钮，@click绑定对应的函数。

9. 使用a-modal组件实现模态框，v-model绑定visible的值，title设置模态框的标题，@ok绑定close函数。

10. 使用插值表达式{{}}来显示输入结果。

11. 使用scoped样式对组件内部的样式进行限定，自定义了.custom-input和label的样式。

这段代码实现了一个简单的表单输入和验证功能，当姓名或年龄不符合要求时，会显示错误提示信息；当输入符合要求时，点击确认按钮会显示输入结果。

最后此篇关于【技术实战】Vue技术实战【三】的文章就讲到这里了,如果你想了解更多关于【技术实战】Vue技术实战【三】的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Mysql高级2-SQL性能分析

文章推荐： .NET如何实现ChatGPT的Stream传输

文章推荐：文档、视频、图片上传(点击、拖拽、批量导入)要‍‍‍‍怎么实现？！

文章推荐： CodeforcesRound#888(Div.3)A-G

实战：Mailivery模拟登录
问题情景混淆群内的小伙伴遇到这么个问题，Mailivery 这个网站登录后，明明提交的表单（邮箱和密码也正确）、请求头等等都没问题，为啥一直重定向到登录页面呢？唉，该出手时就出手啊，我也看看咋回事
实战-行业攻防应急响应
实战-行业攻防应急响应简介：服务器场景操作系统 Ubuntu 服务器账号密码：root/security123 分析流量包在/home/security/security.pcap 相
实战：如何优雅的从Skywalking切换到OpenTelemetry
背景最近公司将我们之前使用的链路工具切换为了 OpenTelemetry. 我们的技术栈是： OTLP C
This Monitor 实战
一同一类的方法都用 synchronized 修饰 1 代码 package concurrent; import java.util.concurrent.TimeUnit; public c
ThreadLocal 实战
一简单例子 1 代码 package concurrent.threadlocal; /** * ThreadLocal测试 * * @author cakin */ public class T
实战：工作中对并发问题的处理
1. 问题背景问题发生在快递分拣的流程中，我尽可能将业务背景简化，让大家只关注并发问题本身。分拣业务针对每个快递包裹都会生成一个任务，我们称它为 task。task 中有两个字段需要
Elasticsearch搜索功能的实现（五）--实战
实战环境 elastic search 8.5.0 + kibna 8.5.0 + springboot 3.0.2 + spring data elasticsearch 5.0.2 +
Win10下yolov8tensorrt模型加速部署【实战】
Win10下yolov8 tensorrt模型加速部署【实战】 TensorRT-Alpha 基于tensorrt+cuda c++实现模型end2end的gpu加速，支持win10、
yolov8tensorrt模型加速部署【实战】
yolov8 tensorrt模型加速部署【实战】 TensorRT-Alpha 基于tensorrt+cuda c++实现模型end2end的gpu加速，支持win10、linux，
实战！微服务认证中心如何扩展授权模式实现多种方式登录？
目录如下：为什么需要自定义授权类型? 前面介绍OAuth2.0的基础知识点时介绍过支持的4种授权类型，分别如下：授权码模式简化模式客户端模式密码模式
实战！退出登录时如何借助外力使JWT令牌失效？
今天这篇文章介绍一下如何在修改密码、修改权限、注销等场景下使JWT失效。文章的目录如下：解决方案 JWT最大的一个优势在于它是无状态的，自身包含了认证鉴权所需要的所有信息，服务器端
实战！聊聊如何解决MySQL深分页问题
前言大家好，我是捡田螺的小男孩。(求个星标置顶) 我们日常做分页需求时，一般会用limit实现，但是当偏移量特别大的时候，查询效率就变得低下。本文将分四个方案，讨论如何优化MySQL百万数
实战！工作中常用到哪些设计模式
前言大家好，我是捡田螺的小男孩。平时我们写代码呢，多数情况都是流水线式写代码，基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢，我觉得，最好的方式就是：使用设计模式优化自己
ARM汇编逆向iOS 实战
我们先讲一些arm汇编的基础知识。（我们以armv7为例，最新iphone5s上的64位暂不讨论）基础知识部分：首先你介绍一下寄存器： r0-r3:用于函数参数及返回值的传递 r4-r6
Class Monitor 实战
一同一类的静态方法都用 synchronized 修饰 1 代码 package concurrent; import java.util.concurrent.TimeUnit; public
实战-DRF快速写接口(认证权限频率)
DRF快速写五个接口，比你用手也快··· 实战-DRF快速写接口开发环境 Python3.6 Pycharm专业版2021.2.3 Sqlite3 Django 2.2 djangorestfram
Apache Thrift 实战
一添加依赖 org.apache.thrift libthrift 0.11.0 二编写 IDL 通过 IDL（.thrift 文件）定义数据结构、异常和接口等数据，供各种编程语言使用 nam
Redis 实战——不公平信号量
我正在阅读 Redis in action e-book关于semaphores的章节.这是使用redis实现信号量的python代码 def acquire_semaphore(conn, semn
WPF必须掌握的技能之自定义控件——实战:自制上传文件显示进度按钮
自定义控件在WPF开发中是很常见的，有时候某些控件需要契合业务或者美化统一样式，这时候就需要对控件做出一些改造。目录按钮设置圆角
使用python 写一个静态服务(实战)
师父布置的任务，让我写一个服务练练手，搞清楚socket的原理和过程后跑了一个小demo，很有成就感，代码内容也比较清晰易懂，很有教育启发意义。代码 ?

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

【技术实战】Vue技术实战【三】

需求实战一

效果展示

代码展示

代码解释

需求实战二

效果展示

代码展示

代码解释

需求实战三

效果展示

代码展示

代码解释

需求实战四

效果展示

代码展示

代码解释