Vue basic introduction note 12: component switching

Time:2021-9-11

Vue basic introduction notes 12

  • Component placeholder: is sets the component to render
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    //Click different tabs to switch between different components
                    <a href="#home" @click.prevent="componentName = 'tabpanel1'" aria-controls="home" role="tab"
                        data-toggle="tab">home</a>
                </li>
                <li role="presentation">
                    <a href="#tab" @click.prevent="componentName = 'tabpanel2'" aria-controls="tab" role="tab"
                        data-toggle="tab">tab</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
            </div>
            //Component placeholder  
            <component :is="componentName"></component>
        </div>
    </div>
    <template id="tab1">
        <h1>tab1</h1>
    </template>
    <template id="tab2">
        <h1>tab2</h1>
    </template>
    <script>
        //Define two components
        Vue.component('tabpanel1', {
            template: '#tab1'
        })
        Vue.component('tabpanel2', {
            template: '#tab2'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                //Default to the first component
                componentName: 'tabpanel1'
            },
            methods: {}
        });
        Vue.config.devtools = true
    </script>
</body>

</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

permutation – full permutation

full permutation problem Topic description output natural numbers in lexicographical order\(1\)arrive\(n\)All non-repeating permutations, i.e.\(n\)The full permutation of , requires that no duplicate digits are allowed in any sequence of digits generated. input format an integer\(n\)。 output format Depend on\(1 \sim n\)Consists of all distinct sequences of numbers, one sequence per line. reserved for each number\(5\)field […]