vue实现页面列表渲染

基本列表渲染

在Vue中，可以使用v-for指令实现列表渲染。基本语法是通过v-for遍历数组或对象，动态生成DOM元素。

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    }
  }
}
</script>

带索引的渲染

v-for支持第二个参数作为当前项的索引，可以用于显示序号或作为唯一标识。

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

对象遍历

v-for也可以遍历对象的属性，参数顺序为(value, key, index)。

<template>
  <ul>
    <li v-for="(value, key) in object" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      object: {
        title: 'Vue Guide',
        author: 'Vue Team',
        published: '2021'
      }
    }
  }
}
</script>

维护状态

为每个渲染项添加唯一的key属性，帮助Vue识别节点，提高渲染效率。

<template>
  <div v-for="item in items" :key="item.id">
    <input :value="item.text">
  </div>
</template>

数组更新检测

Vue对数组的变异方法进行了包裹，以下操作会触发视图更新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

methods: {
  addItem() {
    this.items.push({ id: 4, name: 'New Item' })
  }
}

显示过滤/排序结果

使用计算属性显示处理后的列表，避免直接修改原始数据。

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

在组件上使用v-for

在自定义组件上使用v-for时，需要显式传递数据。

<template>
  <my-component
    v-for="(item, index) in items"
    :item="item"
    :index="index"
    :key="item.id"
  ></my-component>
</template>