十九、Component 标签

骑猪看日落 2022-05-03 08:26 268阅读 0赞

#                           Component 标签 #

Component标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。（根据值的不同，选用不同的标签替换component标签）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>component-4</title>
    </head>
    <body>
        <h1>component-4</h1>
        <hr>
        <div id="app">
            //根据值的不同，选用不同的标签替换component标签
            <component v-bind:is="who"></component>
            <button @click="changeComponent">changeComponent</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:{
                    changeComponent:function(){
                        if(this.who=='componentA'){
                            this.who='componentB';
                        }else if(this.who=='componentB'){
                            this.who='componentC';
                        }else{
                            this.who='componentA';
                        }
                    }
                }
            })
        </script>
    </body>
    </html>