列表渲染 v-for

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

我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要 使用 item in items 形式的特殊语法，其中items 是源数据数组，而 item 则是被迭代的数组元素的别名。

 <ul >
	<li v-for="item in newlist " :key="item.id">{{ item.tistle }}<br>{{ item.cmmmmm }}</li>
</ul>

data(){
  return{
    newlist:[
      {
        id:11,
        tistle:"今日新闻11",
        cmmmmm:"156666"
      },
      {
        id:12,
        tistle:"今日新闻12",
        cmmmmm:"156666"
      },
      {
        id:13,
        tistle:"今日新闻13",
          cmmmmm:"156666"
      },
    ]
  }
 }

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更 新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素 来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每 个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和 重新排序现有元素，需要为每项提供一个唯一的 key attribute：

<li v-for="item in newlist " :key="item.id">{{ item.tistle }}}</li>

v-for 也支持使用可选的第二个参数表示当前项的位置索引

<li v-for="item in newlist " :key="item.id">{{ item.tistle }}{{ item.cmmmmm }}</li>