vue组件切换

最新推荐文章于 2024-06-05 14:43:45 发布

子义间

最新推荐文章于 2024-06-05 14:43:45 发布

阅读量191

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/102463087

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第一种

通过组件实现切换，利用component中：is绑定组件
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <a href="#" @click.prevent="qiehuan='login'">登录</a>
    <a href="#" @click.prevent="qiehuan='zhuce'">注册</a>//.prevent阻止默认行为
    <component :is="qiehuan"></component>
</div>
<template id="zhuce">
    <div class="text-son3">
        <h3>注册组件</h3>
    </div>
</template>
<template id="login">
    <div class="text-son3">
        <h3>登录组件</h3>
    </div>
</template>
</body>
</html>

var vm = new Vue({
    el: '#app',
    data: {
        qiehuan:'login',//当前component中：is绑定组件的名称
    },
    methods: {
    },
    components: {
        login: {
            template: '#login',
            data: function () {
                return {
                    login1:"登录",
                }
            },
            methods: {},
        },
        zhuce: {
            template: '#zhuce',
            data: function () {
                return {
                    zhuce1:'注册',
                }
            },
            methods: {},
        }
    },
})