vue v-for 使用实例

vue yekong

在Vue中,v-for指令用于基于一个数组来渲染一个列表。它需要使用item in items形式的特殊语法,其中items是源数据数组,而item是被迭代的数组元素的别名。v-for还支持一个可选的第二个参数,即当前项的索引。

以下是v-for的一些使用实例:

循环数组

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    };
  }
}
</script>

循环对象的属性

<template>
  <div>
    <div v-for="(value, key, index) in object" :key="index">
      {{ index }}. {{ key }}: {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    };
  }
}
</script>

循环数字范围

<template>
  <div>
    <span v-for="number in 10" :key="number">
      {{ number }}
    </span>
  </div>
</template>

在这些例子中,:key是一个重要的属性,它用于给每个节点提供一个唯一的标识,帮助Vue跟踪和重用现有元素,从而优化DOM的更新性能。

请注意,当使用v-for时,应该避免同时使用v-if,因为v-forv-if具有更高的优先级。如果需要同时使用,可以将v-if放置在包裹v-for的元素上,或者使用计算属性来过滤列表。

喜欢