The vue dynamic component and the v-once command

implement a function, click the button to realize the switching of the two tags to show hidden:

码一:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once command</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="root">
        <child-one v-if="type === 'child-one'"></child-one>
        <child-two v-if="type === 'child-two'"></child-two>
        <button @click="handleBtnClick">Switch</button>
    </div>

    <script>
        Vue.component('child-one', {
            Template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            Template: '<div>child-two</div>'
        })

        Var app = new Vue({
            El: " #root ",
            Data: {
                Type: 'child-one'
            },
            Methods: {
                handleBtnClick: function() {
                    This.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>

码二: Can be changed to use dynamic component <component :is="type"></component>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once command</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="root">
        <component :is="type"></component>
        <button @click="handleBtnClick">Switch</button>
    </div>

    <script>
        Vue.component('child-one', {
            Template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            Template: '<div>child-two</div>'
        })

        Var app = new Vue({
            El: " #root ",
            Data: {
                Type: 'child-one'
            },
            Methods: {
                handleBtnClick: function() {
                    This.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>

码三, use v-once

to use the cache to effectively improve performance without destroying elements frequently. The complete code is as follows:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue v-once command</title>
    <script src="./vue.js"></script>
    <style>

    </style>

</head>

<body>
    <div id="root">
        <component :is="type"></component>
        <button @click="handleBtnClick">Switch</button>
    </div>

    <script>
        Vue.component('child-one', {
            Template: '<div v-once>child-one</div>'
        })
        Vue.component('child-two', {
            Template: '<div v-once>child-two</div>'
        })

        Var app = new Vue({
            El: " #root ",
            Data: {
                Type: 'child-one'
            },
            Methods: {
                handleBtnClick: function() {
                    This.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }
            }

        })
    </script>
</body>

</html>