v-for

菜菜菜的 Vue 30天 –

v-for

一般我们使用原生 JS 要来渲染一个 Array 或是 Object 的时候我们会去使用 for loop,如果是 Array 的话还能够使用 Array Methods,例如:forEach 或 map 等等之类的,如果是 Object 就使用 for in 来跑回圈。

而在 Vue 我们只要使用 v-for 就能简单地做到清单的渲染,下面就来介绍一下如何使用:

v-for 的语法是:

v-for="item in items"
//items 就是要渲染的 Array or Object
//item 就是 Array or Object 里的 children

array

接下来就来实际练习一下,下面我们有一个成员的清单,我们使用 v-for 在我们要执行渲染的元素上。

<body>
  <div id="app">
    <ul>
      <li v-for="member in members">{{member}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      members: ['Andy', 'Arel', 'Otree', 'X', 'Curts', 'Kai', 'Hugh']
    }
  })
</script>

我们针对 li 做 v-for 它会依据 Array 的长度渲染出相对数量的 li,并且显示 Array 的内容,结果如下:

那我们如果要取得每个元素当前的 index 呢?!

很简单的~ 上面 v-for 的语法我们只要再加上 index 就好了

v-for="(item, index) in items"

这样就能取得 index 了,我们一样拿上面的例子来练习~

<body>
  <div id="app">
    <ul>
      <li v-for="(member, index) in members">{{member}} {{index}}</li>
    </ul>
  </div>
</body>

我们就能成功地取得 index 啰~

object

刚刚上面提到了 v-for 不仅仅可以渲染 Array 也能够渲染 Object,使用的方式其实是一样的,下面就来看一下吧~

<body>
  <div id="app">
    <ul>
      <li v-for="(member, key) in members">{{member}} / {{key}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      members: {   //key 随便命名不要太计较啊哈哈
        name1: 'Andy',
        name2: 'Arel', 
        name3: 'Otree', 
        name4: 'X', 
        name5: 'Curts', 
        name6: 'Kai', 
        name7: 'Hugh'
      }
    }
  })
</script>

这样我们一样能够渲染 Object value 还有它的 key 啰~

key

另外 Vue 官方有建议在使用 v-for 进行渲染时,在要渲染的元素上加上一个 key 的属性。

因为 Vue 它会根据 key 值去判断某个值是否修改,如果修改则重新渲染这一项,否则复用之前的元素。

使用方式如下:

<li v-for="item in items" :key="something">{{item}}</li>

key 值必须绑定一个唯一值,也就是不会重复的值。

例如,我们有一个清单是像下面这样:

data: {
  members: [
    {
      id: 1,
      name: 'Andy',
    },
    {
      id: 2,
      name: 'Arel',
    },
    {
      id: 3,
      name: 'Hugh',
    },
  ]
}

在使用 v-for 渲染时就可以这样写:

<li v-for="member in members" :key="member.id">{{member.name}}</li>

这样后面我们在对这清单做操作时,Vue 就会去看这些元素的 key 来判断只针对有新增或修改的重新渲染,其他的就不会再重新渲染了~

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注