H5W3
当前位置:H5W3 > 其他技术问题 > 正文

v-bind:key 绑定的作用是什么?

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” 有这个设定有什么作用。

回答:

增删或切换顺序时提高性能,console warnning里面有提示

回答:

参考这段文档:列表渲染 key。Vue 为了节省资源重复利用已有 DOM 节点,要求开发者给列表中的元素加上唯一的 key,这样在排序之类的操作时,就不需要销毁创建新节点了。

本文地址:H5W3 » v-bind:key 绑定的作用是什么?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址