vue前端开发自学基础,动态切换组件的显示

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的调用。

如图,点击切换组件显示按钮后,从组件A,变成了组件B。

相关推荐
Glommer10 分钟前
某易易盾验证码处理思路(下)
javascript·逆向
砺能16 分钟前
window.postMessage与window.dispatchEvent
前端·javascript
雪中何以赠君别18 分钟前
【框架】CLI 工具笔记
javascript·node.js
th73922 分钟前
Symbol的11个内置符号的使用场景
javascript
古夕31 分钟前
基于 Vue 3 + Monorepo + 微前端的中后台前端项目框架全景解析
前端·javascript·vue.js
JustNow_Man34 分钟前
【Cline】插件中clinerules的实现逻辑分析
开发语言·前端·javascript
天***889637 分钟前
Chrome离线版下载版,Chrome离线版安装文件,Chrome离线包
前端·chrome
呼叫694539 分钟前
requestAnimationFrame 深度解析
前端·javascript
前端_逍遥生41 分钟前
第一次使用 styled-components
前端
Bigger44 分钟前
🚀 真正实用的前端算法技巧:从 semver-compare 到智能版本排序
前端·javascript·算法