我要评论一、使用条件渲染 (v-if)
<template>
<div>
<button @click="currentview = 'componenta'">show component a</button>
<button @click="currentview = 'componentb'">show component b</button>
<component-a v-if="currentview === 'componenta'"></component-a>
<component-b v-if="currentview === 'componentb'"></component-b>
</div>
</template>
<script>
import componenta from './componenta.vue';
import componentb from './componentb.vue';
export default {
data() {
return {
currentview: 'componenta'
};
},
components: {
componenta,
componentb
}
};
</script>二、使用动态组件 (component)
<template>
<div>
<button @click="currentview = 'componenta'">show component a</button>
<button @click="currentview = 'componentb'">show component b</button>
<component :is="currentview"></component>
</div>
</template>
<script>
import componenta from './componenta.vue';
import componentb from './componentb.vue';
export default {
data() {
return {
currentview: 'componenta'
};
},
components: {
componenta,
componentb
}
};
</script>三、点击按钮切换组件
<template>
<div>
<button @click="togglecomponent">切换组件</button>
<div v-if="showcomponent">
<componenta />
</div>
<div v-else>
<componentb />
</div>
</div>
</template>
<script>
import componenta from './componenta.vue'
import componentb from './componentb.vue'
export default {
data() {
return {
showcomponent: true
}
},
methods: {
togglecomponent() {
this.showcomponent = !this.showcomponent
}
},
components: {
componenta,
componentb
}
}
</script><template>
<div>
<button @click="togglecomponent">切换组件</button>
<transition name="fade">
<component :is="currentcomponent" />
</transition>
</div>
</template>
<script>
import componenta from './componenta.vue'
import componentb from './componentb.vue'
export default {
data() {
return {
currentcomponent: 'componenta'
}
},
methods: {
togglecomponent() {
this.currentcomponent = this.currentcomponent === 'componenta' ? 'componentb' : 'componenta'
}
},
components: {
componenta,
componentb
}
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>到此这篇关于vue实现组件切换效果的三种功能的文章就介绍到这了,更多相关vue组件切换内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论