Component 标签（17）

一、component标签用法

image.png

component标签的用法，动态的根据data值显示不同的组件

<div id="app">
    <component v-bind:is="who"></component>
</div>
<script>
    var compA={
        template:`<div style="color: red">A</div>`
    };
    var compB={
        template:`<div style="color:yellow">B</div>`
    };
    var compC={
        template:`<div style="color: blue">C</div>`
    };
    var app=new Vue({
        el:"#app",
        data:{
          who:'compA'
        },
        components:{
            'compA':compA,
            'compB':compB,
            'compC':compC
        }
    });
</script>

二、点击按钮切换不同的组件

<div id="app">
    <component v-bind:is="who"></component>
    <button @click="changeComp()">点击改变组件</button>
</div>
<script>
    var compA={
        template:`<div style="color: red">A</div>`
    };
    var compB={
        template:`<div style="color:yellow">B</div>`
    };
    var compC={
        template:`<div style="color: blue">C</div>`
    };
    var app=new Vue({
        el:"#app",
        data:{
          who:'compA'
        },
        components:{
            'compA':compA,
            'compB':compB,
            'compC':compC
        },
        methods:{
            changeComp:function(){
                if(this.who=='compA'){
                    this.who='compB'
                }else if(this.who=='compB'){
                    this.who='compC'
                }else {
                    this.who='compA'
                }
            }
        }
    });
</script>

else

发现有else和没有else是有区别的，没有else,就只能切换A和C，因为如果第一个条件符合，第二个也符合了，所以直接切到第三个了，
所以要用else,逻辑问题