vue实现组件切换的两种方式

本文转载自查看原文 2019-10-27 19:39 3720 vue

<!DOCTYPE html>
<html>
    <head>
        <title>组件的切换</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- 方式一:结合v-if及v-else 只能实现两个组件的切换-->
        <div id="app">
            <!-- 添加事件修饰符prevent，阻止跳转 -->
            <a href="" @click.prevent="flag=true">登录</a>
            <a href="" @click.prevent="flag=false">注册</a>
            <login v-if="flag"></login>
            <register v-else="flag"></register>
        </div>
        <!-- 方式二：使用vue提供的元素component 可实现多个组件的切换-->
        <div id="app2">
                <a href="" @click.prevent="comName='login'">登录</a>
                <a href="" @click.prevent="comName='register'">注册</a>
            <!-- vue提供的元素，来展示对应名称的组件 -->
            <!-- component是一个占位符，:is属性是指定组件的名称 -->
            <component :is="comName"></component>
        </div>
    </body>
    <script src="node_modules\vue\dist\vue.js"></script>
    <script>
        Vue.component("login",{
            template:"<h3>登录组件</h3>"
        })
        Vue.component("register",{
            template:"<h3>注册组件</h3>"
        })
        let vm = new Vue({
            el:"#app",
            data:{
                flag:false
            }
        });
        let vm2 = new Vue({
            el:"#app2",
            data:{
                comName:"login"
            }
        })
    </script>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 基于 Flutter 以两种方式实现App主题切换 vue组件的两种抽离方式 Javafx 切换界面的两种方式实现两种登录方式一键切换的脚本及相关知识点动态组件 —— 2种方式实现动态组件的切换 VUE弹窗的两种实现方式【Vue入门】页面导入组件的两种方式（六） mybati-plus切换数据源的两种方式 mui 顶部选项卡的两种切换方式 springboot整合mybatis使用xml映射文件和使用注解两种方式的切换