Vue.js入门笔记 v-for循环

• 2019 年 12 月 24 日
• 笔记

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

v-for 循环普通数组

<div id="app">      <p v-for="(item, i) in data">          索引是{{ i }} --- 内容是{{ item }}      </p>  </div>    js：  data : {      data : [1,2,3,4,5],  },

v-for 循环对象数组

<div id="app">      <p v-for="(item, i) in data1">          索引是:{{ i }} -- - 内容是{{ item.id }}--{{ item.name }}      </p>  </div>    js：  data: {      data1: [          { id: 1, name: "name1" },          { id: 2, name: "name2" },          { id: 3, name: "name3" }      ]  },

v-for 循环对象

<div id="app">      <p v-for="(data, key, i) in user">          索引：{{ i }}，键值：{{ key }},内容：{{ data }}      </p>  </div>    js：  data: {      user: {          id: 1,          name: "tim",          age: 18,          width: 200      }  },

v-for 迭代数字

<div id="app">      <p v-for="count in 10">{{ count }}</p>  </div>

2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。