Vue-列表渲染

1.Vue怎么渲染一个列表？

1. 基于数组使用v-for 指令
   v-for 指令需要使用 item in items 语法，不过我们更推荐使用of代替in，因为这样更接近js迭代器的语法。其中 items 是我们要渲染的数组，而 item 则是渲染数组里边的元素的别名。

<div id="root">
  <div v-for="item of list">
    {
  { item.message }}
  </div>
</div>

var vm= new Vue({
  el: '#root',
  data: {
    list: [
      { message: 'hello' },
      { message: 'world' }
    ]
  }
})
<!-- 结果是：hello world  -->

<!-- v-for 还支持一个可选的第二个参数，即当前项的索引index。-->
<div id="root">
  <div v-for="(item, index) of list">
    {
  { index }} - {
  { item.message }}
  </div>
</div>

var vm= new Vue({
  el: '#root',
  data: {
    list: [
      { message: 'hello' },
      { message: 'world' }
    ]
  }
})
<!-- 结果是：0-hello 1-world  -->

一般不推荐使用index当循环数组的key值（防止元素被复用而使用的一个唯一存在的值），性能上会损耗，而使用后端返回的id则是一个常用的方式。

2. 基于数组使用v-for 指令
   可以用 v-for 来遍历一个对象

<div id="root">
  <div v-for