vue前端开发自学基础,动态切换组件的显示！这个是需要借助于，一个官方提供的标签，名字叫【Component】-[代码demo:<component :is="ComponetShow"></component>]。
下面看看代码详情。
<template>
<h3>动态切换组件的显示</h3>
<!-- <ComA></ComA> -->
<component :is="ComponetShow"></component>
<button @click="changeShow">切换组件显示</button>
</template>
<script>
import ComA from './components/ComA.vue';
import ComB from './components/ComB.vue';
export default{
data(){
return{
ComponetShow:"ComA"
}
},
components:{
ComA,
ComB
},
methods:{
changeShow(){
this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"
}
}
}
</script>以上是在app.vue里面写的，一个按钮，绑定点击事件，切换组件A，和组件B的显示。里面很明显，是调用了一个官方提供的标签啊。它有一个属性叫【is】。这个可以绑定一个动态值。
然后用函数就可以随意的更改这个动态值。默认情况下，我们给他赋值了。是组件A的调用。
文章来源：https://www.toymoban.com/news/detail-808805.html
如图，点击切换组件显示按钮后，从组件A，变成了组件B。文章来源地址https://www.toymoban.com/news/detail-808805.html
到了这里，关于vue前端开发自学基础,动态切换组件的显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
