Vue指令之列表渲染

作者:辰風(fēng)沐陽 閱讀:1738 發(fā)布時(shí)間:2020-07-19 上次更新:2020-07-19

1. v-for 指令簡介


  • v-for 指令基于一個(gè)數(shù)組來渲染一個(gè)列表。

  • v-for 指令需要使用 item in/of items 形式的語法

  • 其中 items 是源數(shù)據(jù)數(shù)組,item 是被迭代的數(shù)組元素別名

  • 支持多種數(shù)據(jù)格式:Array | Object | number | string | lterable(2.6新增)

2. v-for 指令使用示例


  1. <li v-for="value in users">{{ value }}</li>
  1. <li v-for="value,index in users">{{ index }} => {{ value }}</li>
  1. <li v-for="(value,index) in users">{{ index }} => {{ value }}</li>

3. v-for 指令的各種數(shù)據(jù)格式場景


(1)、Array

  1. <p v-for="v,k in user">{{ k }} => {{ v }}</p>
  2. <p v-for="v,k in members">{{ v.name }} {{ v.age }}</p>
  3. data: {
  4. user: ['html', 'css', 'javascript'],
  5. members:[
  6. {
  7. name: '張三',
  8. age: 20,
  9. },
  10. {
  11. name: '李四',
  12. age: 25,
  13. },
  14. ]
  15. }

(2)、Object

  1. <p v-for="(v, k) in art">{{ k }} {{ v }}</p>
  2. data: {
  3. art: {
  4. title: '標(biāo)題',
  5. content: '內(nèi)容'
  6. },
  7. }

(3)、Number

  1. <ul>
  2. <li v-for="n in 10">{{ n }}</li>
  3. </ul>

標(biāo)簽: vue