Vue的is属性

最新推荐文章于 2024-01-17 16:05:07 发布

Akimoto Hiroshi

最新推荐文章于 2024-01-17 16:05:07 发布

阅读量383

点赞数

分类专栏： vue javascript 文章标签： vue javascript

本文链接：https://blog.csdn.net/dyw3390199/article/details/111414959

版权

vue 同时被 2 个专栏收录

102 篇文章 5 订阅

订阅专栏

javascript

83 篇文章 3 订阅

订阅专栏

我们看一个切换标签的例子：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Components Example动态组件</title>
    <script src="../vue202012/vue.js"></script>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }

        .tab-button:hover {
            background: #e0e0e0;
        }

        .tab-button.active {
            background: #e0e0e0;
        }

        .tab {
            border: 2px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="dynamic" class="demo">
        <button
            v-for="tab in tabs"
            v-bind:key="tab"
            v-bind:class="['tab-button',{active:tab === currentTab}]"
            v-on:click="currentTab = tab"
        >
            {{ tab }}
        </button>
        <component v-bind:is="currentTabComponent" class="tab"></component>
    </div>
    <script>
        Vue.component('tab-home',{
            template:"<div>Home Component</div>"
        });
        Vue.component('tab-posts',{
            template:"<div>Posts Component</div>"
        });
        Vue.component('tab-info',{
            template:"<div>Info Component</div>"
        });
        new Vue({
            el:'#dynamic',
            data:{
                currentTab:'Home',
                tabs:['Home','Posts','Info']
            },
            computed:{
                currentTabComponent:function(){
                    return "tab-" + this.currentTab.toLowerCase()
                }
            }
        })
    </script>
</body>

效果如下：
在这里插入图片描述

这里红框里面的代码，v-bind出现的时候，就会在vue实例的data里面去寻找值，这里我们用的不是data中的值，而是computed里面的函数动态返回值

比如我们点击第二个按钮的时候，currentTab就被设置成了字符串Posts
所以此时currentTabComponent计算的结果就是字符串tab-posts，相当于此时的代码是这样的：

<component v-bind:is="'tab-posts'" class="tab"></component>

注意这里的'tab-posts'外面的''不可以去掉

通过'tab-posts'找到了注册的全局组件'tab-posts'，就可以用这个全局组件替换掉这里的<component></component>了

参考资料：

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录