Vue Component 标签

最新推荐文章于 2024-07-14 14:12:04 发布

Lvdon9

最新推荐文章于 2024-07-14 14:12:04 发布

阅读量468

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88702372

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
    <h1>Component 标签</h1>
    <hr>
    <div id="app">
        <component v-bind:is="who"></component>
        <button @click="changComponent">wwwww</button>
    </div>
    <script type="text/javascript">
    	var componentA={
    		template:`<div style="color:red">I'm componentA</div>`
    	}
    	var componentB={
    		template:`<div style="color:green">I'm componentB</div>`
    	}
    	var componentC={
    		template:`<div style="color:pink">I'm componentC</div>`
    	}
        var app=new Vue({
            el:'#app',
            data:{
                who:'componentA'
            },
            components:{
            	"componentA":componentA,
            	"componentB":componentB,
            	"componentC":componentC,
            	
            },
            methods:{
            	changComponent(){
            		if(this.who=="componentA"){
            			this.who="componentB"
            		}else if(this.who=="componentB"){
            			this.who="componentC"
            		}else{
            			this.who="componentA"
            		}
            	}
            }
        })
    </script>
</body>
</html>