<template>
<div >
<component v-bind:is="current"/>
<button @click="displayComponent1">显示component1</button>
<button @click="displayComponent2">显示component2</button>
</div>
</template>
<script>
// eslint-disable-next-line
//import { Lazyload } from 'vant';
import Vue from 'vue'
//import {Toast} from 'vant';
//import {Notify} from 'vant'
Vue.component('component1', {
template: `
<div >
<h3>this is my component1
</div>
`
})
Vue.component('component2', {
template: `
<div >
<h3>this is my component2
</div>
`
})
export default {
data() {
return {
current: 'component1'
};
},
mounted() {
},
methods: {
displayComponent1(){
this.current="component1";
},
displayComponent2(){
this.current="component2";
}
},
};
</script>
<style >
</style>
07-21
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-30
3564
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交