27.组件切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

<div id="app">

    <a href="" @click.prevent="flag=true">登录</a>

    <a href="" @click.prevent="flag=false">注册</a>

    <my-com1 v-if="flag"></my-com1>

    <my-com2 v-else="flag"></my-com2>

</div>

<script>

    Vue.component('myCom1',{

        template:'<h1>登录组件</h1>',

    });

    Vue.component('myCom2',{

        template:'<h1>注册组件</h1>',

    });

    var vm=new Vue({

        el:"#app",

        data:{

            flag:true

        }

    })

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应...
    前端一菜鸟阅读 875评论 0 16
  • 1.什么是组件 组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们...
    不会改变阅读 407评论 0 0
  • Vue创建组件 什么是组件 什么是组件?组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划...
    TyCoding阅读 605评论 0 2
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,241评论 0 6
  • 无语问苍天, 苍天说,你都无语了还语个啥, 还是问你自己吧。 这苦逼的人生!
    jstang0928阅读 161评论 0 1