27vue学习——v-if 和 v-else实现两个组件切换

最新推荐文章于 2022-07-27 17:45:48 发布

0563xixi

最新推荐文章于 2022-07-27 17:45:48 发布

阅读量1.6k

点赞数 4

本文链接：https://blog.csdn.net/weixin_42530160/article/details/98514456

版权

27vue学习——v-if 和 v-else实现两个组件切换

前言

我们在做项目的时候，很多时候都需要选项卡切换的功能。选项卡的切换也就是两个组件的切换，那我们如何在 vue 中实现两个组件之间的切换呢？这篇文章我们来学习一下如何使用 v-if 和 v-else实现两个组件切换。

1.代码：

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

<head>
    <meta charset="UTF-8">
    <title>组件切换</title>
</head>

<body>
    <div class="body">
        <input type="button" value="登录" @click="flag=true">
        <input type="button" value="注册" @click="flag=false">

        <!-- 使用 v-if 和 v-else 实现切换效果-->
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>

    <!-- 登录组件 -->
    <template id="login">
        <h3>我是登录组件</h3>
    </template>

    <!-- 注册组件 -->
    <template id="register">
        <h3>我是注册组件</h3>
    </template>
    
    <script src="../lib/vue-2.4.0.js"></script>
    
    <script>
        /* 登录组件 */
        Vue.component("login", {
            template: "#login"
        })
        /* 注册组件 */
        Vue.component("register", {
            template: "#register"
        })

        let vm = new Vue({
            el: ".body"
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述

讲解：
（1）定义两个不同的组件，并且在页面中引用

（2）给两个组件分别添加属性 v-if 和 v-else，其中两个属性的值为一个相同的值

（3）为两个按钮绑定事件
（3.1）点击登录按钮时 flag 值变为 true——控制登录组件的出现
（3.2）点击注册按钮时 flag 值变为 false——控制注册组件的出现

0563xixi

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
27vue学习——v-if 和 v-else实现两个组件切换

我们在做项目的时候，很多时候都需要选项卡切换的功能。选项卡的切换也就是两个组件的切换，那我们如何在 vue 中实现两个组件之间的切换呢？这篇文章我们来学习一下如何使用 v-if 和 v-else实现两个组件切换。
复制链接

扫一扫