组件当中的选项卡之多个切换

切换多个选项卡的功能

切换两个元素可以使用true或者false，但切换多个，就不行了，这里我们需要Vue中提供的<component ：is='componentId'>这个标签来实现多个选项卡的切换。

<div id="app">
        <button @click="componentId='mycom1'">按钮</button>
        <button @click="componentId='mycom2'">按钮</button>
        <button @click="componentId='mycom3'">按钮</button>
        <!-- component标签相当于是一个占位符 -->
        <component :is="componentId"></component>
    </div>
    <template id="tem1">
        <h1>hello world1</h1>
    </template>
    <template id="tem2">
            <h1>hello world2</h1>
        </template>

        <template id="tem3">
        <h1>hello world3</h1>
    </template>
    <script>
        Vue.component('mycom1', {
            template:'#tem1'
        })
        Vue.component('mycom2', {
            template:'#tem2'
        })
        Vue.component('mycom3', {
            template:'#tem3'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                componentId: 'mycom1'
            },
            methods: {}
        });
    </script>