账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    v-bind:key 绑定的作用是什么?
    39
    0

    https://cn.vuejs.org/v2/guide...
    这里的示例改成如下:

        <style>
        #demo,
        .demo,
        .content .demo {
            border: 1px solid rgb(238, 238, 238);
            border-radius: 2px;
            padding: 25px 35px;
            margin-top: 1em;
            margin-bottom: 40px;
            font-size: 1.2em;
            line-height: 1.5em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            overflow-x: auto;
        }
    
        #demo> :first-child,
        .demo> :first-child,
        .content .demo> :first-child {
            margin-top: 0;
        }
    
        .dynamic-component-demo-tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid rgb(204, 204, 204);
            cursor: pointer;
            background: rgb(240, 240, 240);
            margin-bottom: -1px;
            margin-right: -1px;
        }
    
        .dynamic-component-demo-tab-button-active {
            background: rgb(224, 224, 224);
        }
        </style>
    </head>
    
    <body>
     
        <!-- 动态组件  -->
        <div id="dynamic-component-demo" class="demo">
            <button v-for="tab,index in tabs"
            class="dynamic-component-demo-tab-button"
            :class="{'dynamic-component-demo-tab-button-active': tab === currentTab }"
            @click="currentTab = tab">   
          {{ tab }}
            </button>
            <component :is="currentTabComponent" class="dynamic-component-demo-tab">
            </component>
        </div>
        <script type="text/javascript">
        var tabHome = {
            template: ` <p>Home component  </p> `
        }
        var tabPosts = {
            template: ` <p>Posts component  </p> `
        }
        var tabArchive = {
            template: ` <p>Archive component  </p> `
        }
        var app = new Vue({
            el: "#dynamic-component-demo",
            data: {
                tabs: ['Home', 'Posts', 'Archive'],
                currentTab: 'Home',
            },
            components: {
                "tab-home": tabHome,
                "tab-posts": tabPosts,
                "tab-archive": tabArchive,
            },
            computed: {
                currentTabComponent: function() {
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        });
        </script>

    与原文内容不一致的地方是去掉了按钮上面的

    v-bind:key="tab"

    通过hhttps://cn.vuejs.org/v2/guide... 了解到v-for做列表渲染的时候可以有三个参数(value,key,index)分别代表对象属性的值,对象的属性名和键值对的索引。官网动态组件这里的 tabs: ['Home', 'Posts', 'Archive'], 也只是普通的字符串数组。
    所以,动态数组那里 v-bind:key="tab" 有这个设定有什么作用。

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益