• 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>

  • 相关阅读:
    Appium混合页面点击方法tap的使用
    非小细胞肺癌靶向用药整理
    托育老师每天只是“看”孩子吗？“托”和“育”哪个更重要？
    代码随想录算法训练营第五十五天| LeetCode647. 回文子串、516.最长回文子序列
    删除docker容器日志
    练习八-利用有限状态机进行时序逻辑的设计
    最新NVIDIA英伟达GPU显卡算力表
    品尝葡萄酒要注意的重点事项有哪些？
    FPGA 多路视频处理：图像缩放+视频拼接显示，HDMI采集，提供2套工程源码和技术支持
    开源 C++ JSON 库 sonic-cpp解析性能为 rapidjson 的 2.5 倍
  • 原文地址：https://blog.csdn.net/weixin_44827643/article/details/126302852