• Vue.js之动态绑定组件

    本文主要介绍Vue.js中如何进行组件的动态切换。

    核心：通过is绑定需要展示的组件名，component为占位符。

    下面实例定义了child1和child2两个组件，点击按钮可实现两者的动态切换。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <component :is="type">component>
    14.         <div>
    15.             <button @click="change">点击button>
    16.         div>
    17.     div>
    18.     <script src="./vue.min.js">script>
    19.     <script>
    20.         const child1 = {
    21.             template: `
      •                 
      • 子
    23. 组
  • 间
  • 1
  • `,
  • methods: {},
  • data() {
  • return {
  • }
  • }
  • };
  • const child2 = {
  • template: `
    子组件2
    `    ,
  • methods: {
  • },
  • data() {
  • return {
  • }
  • }
  • };
  • const vm = new Vue({
  • el: "#app",
  • data() {
  • return {
  • type: 'child1'
  • }
  • },
  • methods: {
  • change() {
  • this.type = this.type == 'child1' ? 'child2' : 'child1';
  • }
  • },
  • components: {
  • child1,
  • child2
  • }
  • })
  • script>
  • body>
  • html>

  • 相关阅读:
    SpringBoot2
    DDS::core::Entity
    NX二次开发-UFUN CSYS坐标系转换UF_CSYS_map_point
    Java27岁啦——一次争执引起的Java内卷生涯
    C++程序开启大地址(虚拟内存),让32位程序使用4G内存的方，虚拟内存概念及寻址范围详解
    【Kingbase FlySync】评估工具安装及使用
    网络安全（黑客）自学
    uhttpd调试小结
    我擦\那些测试员面试中的“潜规则”，千万不要踩坑
    简易根文件系统构建实验及过程详解
  • 原文地址：https://blog.csdn.net/weixin_44827643/article/details/126302852