<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>动态组件</title><style>.active{color: blue;}</style></head><body><divid="app"><ul><liv-for="item in list":key="item.name"@click="currentComponents = item.components":class="{active:item.components===currentComponents}">{{ item.name }}</li></ul><divclass="box"><component:is="currentComponents"></component></div></div><script>var vm =newVue({el:"#app",data(){return{currentComponents:"com1",list:[{name:"组件1",components:"com1"},{name:"组件2",components:"com2"},{name:"组件3",components:"com3"},]}},components:{com1:{data(){return{info:"组件1内容"}},template:"<p>{{ info }}</p>"},com2:{data(){return{info:"组件2内容"}},template:"<p>{{ info }}</p>"},com3:{data(){return{info:"组件3内容"}},template:"<p>{{ info }}</p>"}}});</script></body></html>