• vvv动态组件和keep-alive


    <!DOCTYPE html>
    <html>
    <head>
    <style>

    </style>
    <script src="a.js"></script>
    </head>
    <body>
    <div id="root"></div>
    </body>
    <script>

    const app = Vue.createApp({
        data(){
            return {
                currentItem:'input-item'
            }
    },
    methods:{
        zmf(){
            this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
        }
    },
    template:`
    <keep-alive>
    <component :is="currentItem"/>
    </keep-alive>
    <!-- <input-item v-show="currentItem === 'input-item'" /> -->
    <!-- <common-item v-show="currentItem === 'common-item'" /> -->
    <button @click="zmf">zmf</button>
    `
    })
    app.component('input-item',{
    
    template:`
    <div>
        input-item
    </div>
    `
    })
    app.component('common-item',{
    
    template:`
    <div>
        common-item
    </div>
    `
    })
    
    
    const vm = app.mount('#root')

    </script>
    </html>

  • 相关阅读:
    第一章
    第三章
    第四章
    第十章 读书笔记
    第八章 读书笔记
    第九章 读书笔记
    第7章实验心得
    第六章实验心得
    第五章心得体会
    第四章实验心得
  • 原文地址:https://www.cnblogs.com/lfhphp/p/14919338.html
Copyright © 2020-2023  润新知