vue学习(十六)动态组件

最新推荐文章于 2022-06-19 13:34:33 发布

dream21st

最新推荐文章于 2022-06-19 13:34:33 发布

阅读量126

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_36305027/article/details/83758491

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <component :is="type"></component>
        <!--<child-one v-if="type=='child-one'"></child-one>
        <child-two v-if="type=='child-two'"></child-two>-->
        <button @click="handleclick">点击</button>
    </div>

    <script>

        Vue.component("child-one",{
            template:'<div v-once>child-one</div>'
        })

        Vue.component("child-two",{
            template:'<div v-once>child-two</div>'
        })

        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                type:''
            },
            methods:{
                handleclick:function () {
                    this.type=this.type=='child-one'?'child-two':'child-one'
                }
            }
        })
    </script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dream21st

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习(十六)动态组件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="vue.js"&gt;&l
复制链接

扫一扫