vue基础七

发表于 | 分类于

列表渲染 v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名

基础用法

template

1
2
3
4
5
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

script

1
2
3
4
5
6
7
8
9
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})

结果

1
2
. FOO
. Bar

索引index

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引
template

1
2
3
4
5
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

script

1
2
3
4
5
6
7
8
9
10
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果

1
2
. Parent-0-Foo
. Parent-1-Bar

template v-for

如同 v-if 模板，你也可以用带有 v-for 的

对象迭代 v-for

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

1
2
3
4
5
ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

script

1
2
3
4
5
6
7
8
9
10
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果

1
2
3
. John
. Doe
. 30

整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板

1
2
3
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果

1
1 2 3 4 5 6 7 8 9 10