纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue.js 动态组件 vue.js 动态组件详解

猫老板的豆   2021-09-14 我要评论
想了解vue.js 动态组件详解的相关内容吗,猫老板的豆在本文为您仔细讲解vue.js 动态组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue.js,动态组件,vue.js,动态组件详解,下面大家一起来学习吧。

:is 动态组件

使用 v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;

<div id="app">
    <test v-bind:is="which_to_show"></test>
</div>

<script>
    var demo = new Vue({
        el: "#app",
        data: {
            which_to_show: "first"
        },
        components: {
            first: {
                template: "<div>这里是子组件first</div>"
            },
            second: {
                template: "<div>这里是子组件second</div>"
            },
            third: {
                template: "<div>这里是子组件third</div>"
            }
        }
    });
</script>

这里写图片描述

通过改变 which_to_show 的值就可以动态改变想要加载渲染的组件,如下:

这里写图片描述

到此这篇关于vue.js 动态组件详解的文章就介绍到这了,更多相关vue.js 动态组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


相关文章

猜您喜欢

  • Ray集群创建Python分布式 使用Ray集群简单创建Python分布式应用程序

    想了解使用Ray集群简单创建Python分布式应用程序的相关内容吗,somenzz在本文为您仔细讲解Ray集群创建Python分布式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Ray集群创建Python分布式,Ray集群使用,Python分布式,下面大家一起来学习吧。..
  • MySQL 使用 limit的性能影响 MySQL 用 limit 为什么会影响性能

    想了解MySQL 用 limit 为什么会影响性能的相关内容吗,zhangyachen 肥朝在本文为您仔细讲解MySQL 使用 limit的性能影响 的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:MySQL,使用,limit的性能影响,MySQL,使用,limit,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.hao45.cc 【好下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式