深入理解vue.js2.0指令v-for使用及索引获取

最新推荐文章于 2026-05-17 06:40:40 发布

原创最新推荐文章于 2026-05-17 06:40:40 发布 · 1.8w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue 2.0 #vue.js2.0指令 #v-for使用 #指令v-for使用及索引获取

vue 2.0 专栏收录该内容

49 篇文章

订阅专栏

本文详细介绍了 Vue.js 中 v-for 指令的使用方法，包括基本用法、索引获取、对象迭代、整数迭代等，并通过实例展示了如何在组件中使用 v-for 和传递数据。

深入理解vue.js2.0指令v-for使用及索引获取

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名（或者用于对象的键）：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

索引

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
结果：
.Parent - 0 -Foo

.Parent - 1 -Bar

注意：在2.0版是1~10中，$index已废除，索引 (item,index)。

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

对象迭代 v-for

你也可以用 v-for 通过一个对象的属性来迭代。

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

结果：

.John

.Doe

.30
你也可以提供第二个的参数为键名：

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

第三个参数为索引：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。
<div>
  <span v-for="n in 10">{{ n }}</span>
</div>
结果：
1 2 3 4 5 6 7 8 9 10
注意：在1.0版，0~9 在2.0版是1~10。

组件和 v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。
<my-component v-for="item in items"></my-component>
然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props ：
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>
不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用。
下面是一个简单的 todo list 完整的例子：
<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})
结果：
想知道，自己敲下，不就知道啦