<div class="app">
<button v-for="(item,inde) in list" @click="changeBtn(inde)">{{item}}</button>
<component :is="selC[index]"></component>
</div>
Vue.component("test",{
template:"<p>{{msg}}</p>",
data:function(){
return {
msg:"组件一"
}
}
});
Vue.component("test2",{
template:"<p>{{msg}}</p>",
data:function(){
return {
msg:"组件二"
}
}
});
new Vue({
el:".app",
data:{
selC:["test","test2"],
index:0,
list:["按钮显示组件1","按钮显示组件2"]
},
methods:{
changeBtn:function(val){
console.log(val)
this.index=val;
}
}
})