旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

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 的值就可以动态改变想要加载渲染的组件,如下:

这里写图片描述


本文作者:猫老板的豆

本文链接:https://www.cnblogs.com/bingcola/p/16499267.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(165)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.