关于vue.js输出组件的id问题

以下是运行环境以及代码.
http://jsfiddle.net/50wL7mdz/93626

我的问题是:我要怎么把 todo.id 输入到屏幕上.
这是一个官方文档的例子.
https://cn.vuejs.org/v2/guide/list.html#一个组件的-v-for
但是我一直没搞懂.

把html中的那个 v-bind:key=todo.id 改成 v-bind : id = todo.id 就好了

你的这个问题其实是在vue.js的组件模块遇到的。你的js中已经定义了组件，并在组建中给了{{id}}-{{title}}的输出。这个时候你在你的html中定义了
你的

（is表示）是下边的组件的复用。在你下边的组件中，你在props定义了两个属性，id和title。这说明这两个东西是父组件传递给你的(可以查看父子组件传递)。然后你必须在上边的html中传递这两个值，但是你只传递了一个title，所以你的id是空的，所以加上v-bind:id="todo.id"就行了。楼上的解释虽然解决了问题，但是在2.2+的vue.js版本中列表循环（v-for）的key属性是十分必要的，如果不写回产生其他问题。

在指定位置输入定界符加变量即可输出

根据你的示例，其实你在todo-item这个组件里，是已经定义了id和title如何显示的了。
{{id}} -{{title}}
现在，没有显示的原因是，你在调用这个组件时，没有把组件的id属性绑定进去，方法就是：在v-bind:key = "todo.id"的上面，再增加一个 v-bind:id="todo.id"，
相对完整的代码，在HTML中如下：

   <ul>
    <li
      is="todo-item"
      v-for="(todo, index ) in todos"
     _** v-bind:id="todo.id"  **_
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

希望能帮助你的理解，谢谢~~

is="todo-item"
v-for="(todo, index ) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-bind:id="todo.id"
v-on:remove="todos.splice(index, 1)"
>

上面大家说了，加一行 v-bind:id="todo.id" 就能解决问题

另，楼主的疑问可能是
v-bind:key="todo.id"
v-bind:id="todo.id"
首先， v-bind:key="todo.id"的意思是，在列表渲染中，给每一个todo设置一个用于区分的值，这个值是todo.id；这个key相当于每一个todo的唯
一标识，并不是向组件中传值，这个key在vue的列表渲染中现在是必须的，每个v-for都必须有:key，否则会发出警告
其次，vue父组件向子组件中传值使用v-bind:name = value，如之前的代码，然后在子组件中用props接收方可使用
楼主在上面例子中，使用todo.id作为todo的唯一标识，但是它的值并没有传入子组件中，所以需要添加 v-bind:id="todo.id"这行代码

另：v-bind:可以缩写为:，如 v-bind:id="todo.id"等价于:id="todo.id"；v-bind:key="todo.id"等价于:key="todo.id"

v-bind:title="todo.title"改成v-bind:title="todo.id"