Vue3（3. 列表渲染）

用 v-for 把一个数组映射为一组元素

<ul>
  <li v-for="item in messages">{{ item.name }}</li>
</ul>

data() {
  return {
    messages: [
      {name:'aaa'},
      {name:'bbb'},
      {name:'ccc'}
    ]
  }
}

为方便监听列表数据的变化，加一个key属性如下，如果列表数据中没有唯一的属性值如id，那可以用v-for中自带的index值

<!-- 如果有唯一值id的情况下，key值就可以是id -->
<ul>
  <li v-for="(item,index) in messages" :key="index">{{ it
  em.name }}</li>
</ul>