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 的運作緊密耦合。明確組件數據的來源能夠使組件在其他場合重複使用。