Vue实验报告4 Tab栏与按钮实现动态切换

lsy永烨

已于 2023-11-28 15:06:29 修改

阅读量1.3k

点赞数

分类专栏： vue实验报告文章标签：前端 vue.js

于 2023-11-03 00:20:31 首次发布

本文链接：https://blog.csdn.net/m0_69194031/article/details/134193836

版权

vue实验报告专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、实验要求

（1）

编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果

编写一个登录界面，最上面是并排的两个按钮——“账号登录”和“二维码登录”，点击账号登录，下方会出现账号密码的文本和文本输入框，还有登录和取消两个按钮（不必实现具体功能），而点击二维码登录下方则会出现一个二维码图片和“请扫描二维码登录”这行文本，并通过transition组件结合animate.css实现切换时的动画效果

（2）

实现单击一个按钮后，切换盒子的展开和收起状态

二、实验结果

（1）

结果展示：

代码展示：

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <script src="app.js"></script>
    <style>
        .slide-fade-enter-active,
        .slide-fade-leave-active {
            transition: all 0.5s;
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            transform: translateX(15%);
            opacity: 0;
        }

        .slide-fade-enter-to,
        .slide-fade-leave {
            transform: translateX(0);
            opacity: 1;
        }

        .biaoti {
            color: gray;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click="showAccountLogin">账号登录</button>
            <button @click="showQRcodeLogin">二维码登录</button>
        </div>

        <transition name="slide-fade" mode="out-in">
            <div v-if="loginType === 'account'" key="account">
                <h2>账号登录</h2>
                <label for="username">账号:</label>
                <input type="text" id="username" v-model="username">
                <br>
                <label for="ps">密码:</label>
                <input type="password" id="ps" v-model="password">
                <br>
                <button @click="login">登录</button>
                <button @click="cancel">取消</button>
            </div>

            <div v-else key="qrcode">
                <h2>二维码登录</h2>
                <img src="111.png" alt="二维码">
                <p class="biaoti">请扫描二维码登录</p>
            </div>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                loginType: 'account',
                username: '',
                password: ''
            },
            methods: {
                // 切换到账号登录
                showAccountLogin() {
                    this.loginType = 'account';
                },
                // 切换到二维码登录
                showQRcodeLogin() {
                    this.loginType = 'qrcode';
                },
                // 执行登录操作
                login() {
                    // 这里可以添加实际的登录逻辑，例如通过API发送登录请求
                    // 暂时使用alert显示登录成功，并展示用户名和密码
                    alert('登录成功 用户名：' + this.username + ', 密码: ' + this.password);
                },
                // 取消登录，清空用户名和密码
                cancel() {
                    this.username = '';
                    this.password = '';
                }
            }
        });
    </script>
</body>

</html>

（2）

结果展示：

代码展示：

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子展开和收起</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        .hezi {
            background-color: red;
            height: 400px;
            width: 100px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-if="ss === 'zhankai'">
            <button @click="showZhan">展开</button>
        </div>

        <div v-else>
            <button @click="showShou">收起</button>
        </div>
        <div class="hezi" v-if="ss === 'shou'"></div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                ss: 'zhankai'
            },
            methods: {
                showZhan() {
                    this.ss = 'shou';
                    hezi.visible = 'true';
                },
                showShou() {
                    this.ss = 'zhankai';
                    hezi.visible = 'false'
                }
            }
        })
    </script>
</body>

</html>

三、实验总结

1.mode的区别（很关键，不然效果完全不一样）：

（1）in-out 模式：默认情况下，在这种模式下，新元素的进场动画会在旧元素的出场动画之前播放。先进再出

（2）out-in 模式：与 in-out 相反，旧元素的出场动画会在新元素的进场动画之前播放。先出再进

2.label标签中的for和input标签中的id建立联系，之后提供一个更大的点击范围。

3.key有助于提高渲染，有助于Vue识别项目并提高DOM的更新的性能。

4.v-model用于双向绑定div和vue对象的数据，即起id或class这样类似人类姓名的作用