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

v-bind中为什么key和id都可以?

<template>
  <div id="todolist">
    <ul>
      <li v-for="todo in todos">
        <todo v-bind:todo="todo"
              v-bind:id="todo.id">  //这里也可以是v-bind:key="todo.id"
        </todo>
      </li>
    </ul>
  </div>
</template>

<script>
  import Todo from './Todo.vue'

  export default {
    components: {
      Todo
    },
    data: function () {
      return {
        todos: [
          { text: 'Learn Vue' },
          { text: 'Do hard things' }
        ]
      }
    }
  }
</script>

这段代码中为什么v-bind:id也可以改成v-bind:key?

回答:

首先你得理解v-bind的含义,是vue的一个用于绑定html属性的指令,可以绑定已有属性,也可以绑定自定义属性,v-bind:id即表示绑定已有属性id,v-bind:key是为了在v-for循环中给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。
当然你也可以用于绑定自定义属性,如给每项增加一个tid,v-bind:tid。

回答:

这好比一个元素既有id又有class,你可以通过id或者class取到这个元素,他们之间是有联系,但是功能和表达的含义还是有些许不同的

回答:

v-bind:id绑定的是html的属性
v-bind:key看这里

回答:

什么叫为什么都可以 自定义属性 可以v-bind绑定啊 难道这个有问题么 只不过你换个属性 获取改变的时候获取你所定义的属性就好

回答:

你不会想说 两种写法在子组件都可以接收到数据吧,我没试过,理论上应该不会吧。还有记得一些html的保留字最好不要用作props。

本文地址:H5W3 » v-bind中为什么key和id都可以?

评论 0

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