Vue动态组件小例子

最新推荐文章于 2024-10-13 20:20:53 发布

Queen_zdd

最新推荐文章于 2024-10-13 20:20:53 发布

阅读量700

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Queen_zdd/article/details/78373060

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue1.0.js"></script>
</head>
<body>
<body>
<div id="example">
    <input type="button" value="A组件" @click="a='aaa'"/>
    <input type="button" value="B组件" @click="a='bbb'"/>

    //创建动态组件 <component :is="组件名称"></component>

    <component :is="a"></component>
</div>

<script>
    window.onload=function(){
        new Vue({
            el: '#example',
            data:{
                     a:'aaa'
                 },
            components:{
                aaa:{
                    template:'<h1>我是A组件</h1>'
                },
                bbb:{
                    template:'<h1>我是B组件</h1>'
                }
            }
    })
    }
</script>
</body>
</html>