你的位置:首页 > Java教程

[Java教程]Vue#列表渲染


v-for 可以基于一个数组渲染一个列表。 形式为  item in items ,其中item为自定义元素别名,items为数组元素。在v-for块内有一个当前数组元素索引 $index。

https://jsfiddle.net/miloer/e7sf5gfL/

从 1.0.17 开始可以使用 of 分隔符,更接近 JavaScript 遍历器语法:

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

template里也可以使用v-for:

<ul> <template v-for="item in items">  <li>{{ item.msg }}</li>  <li class="divider"></li> </template></ul>

Vue也封装了几组方法:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

https://jsfiddle.net/miloer/e7sf5gfL/1/

 

v-for也可以使用 v-for 遍历对象。除了 $index 之外,作用域内还可以访问另外一个特殊变量$key。我觉得这个真心好用啊哈哈。

https://jsfiddle.net/miloer/e7sf5gfL/2/

官方的一个小注意:

在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

v-for 也可以接收一个整数,此时它将重复模板数次。

<div> <span v-for="n in 10">{{ n }} </span></div>//0-9

最后还有一个数组过滤:

https://jsfiddle.net/miloer/e7sf5gfL/4/