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>

查看全文

相关阅读:
创建数据库链
 redis命令
 redis.conf文件配置信息
 mybatis调用存储过程实现
 oracle游标使用遍历3种方法
 Proud Merchants
Bag Problem
Watch The Movie
Accepted Necklace
Bone Collector II

原文地址：https://www.cnblogs.com/lfhphp/p/14919338.html