Vue.js中可通过嵌套v-for指令高效渲染二维图片，通常需定义二维数组数据结构，外层循环遍历行索引，内层循环遍历列索引，结合动态绑定（如:src="image.url"）渲染图片路径，使用:key属性绑定唯一值（如${row}-${col}）可优化渲染性能，`内嵌套`，即可实现按行列布局的图片展示，适用于相册、网格图等场景。
Vue.js 中使用 v-for 循环渲染二维图片矩阵详解
在 Web 开发中，图片网格展示是高频需求，如电商商品矩阵、相册布局或数据可视化场景，当图片数据以二维数组形式组织（例如按行/列分组的图片集合）时，Vue.js 的 v-for 指令能高效实现动态渲染效果，本文从基础语法到进阶优化，系统讲解如何通过 v-for 处理二维图片数组,助您掌握这一核心技能。
二维图片数组的数据结构设计
渲染前需明确二维数组的数据结构：外层数组代表"行"或分组，内层数组存储该行的图片元素,每个图片元素可支持两种形式：
- 简单形式：直接存储图片 URL 字符串
- 对象形式：包含
id、src、alt等元数据（推荐,便于扩展）
示例数据结构（对象形式）
data() {
return {
// 3行×4列的图片矩阵
imageMatrix: [
[
{ id: 1, src: 'https://example.com/img1.jpg', alt: '风景图1' },
{ id: 2, src: 'https://example.com/img2.jpg', alt: '风景图2' },
{ id: 3, src: 'https://example.com/img3.jpg', alt: '风景图3' },
{ id: 4, src: 'https://example.com/img4.jpg', alt: '风景图4' }
],
[
{ id: 5, src: 'https://example.com/img5.jpg', alt: '产品图1' },
{ id: 6, src: 'https://example.com/img6.jpg', alt: '产品图2' },
{ id: 7, src: 'https://example.com/img7.jpg', alt: '产品图3' },
{ id: 8, src: 'https://example.com/img8.jpg', alt: '产品图4' }
],
[
{ id: 9, src: 'https://example.com/img9.jpg', alt: '插画1' },
{ id: 10, src: 'https://example.com/img10.jpg', alt: '插画2' },
{ id: 11, src: 'https://example.com/img11.jpg', alt: '插画3' },
{ id: 12, src: 'https://example.com/img12.jpg', alt: '插画4' }
]
]
};
}此结构中，imageMatrix 是一个 3×4 的矩阵，每行包含 4 个带元数据的图片对象,便于后续扩展功能。
基础用法：嵌套 v-for 实现二维渲染
二维数组渲染需嵌套使用 v-for 指令：外层循环遍历行（外层数组），内层循环遍历行内图片（内层数组），关键点在于为每个节点绑定唯一 key 以优化渲染性能。
模板实现
<template>
<div class="image-grid">
<!-- 外层循环：遍历行 -->
<div
v-for="(row, rowIndex) in imageMatrix"
:key="`row-${rowIndex}`"
class="grid-row"
>
<!-- 内层循环：遍历行内图片 -->
<img
v-for="image in row"
:key="image.id"
:src="image.src"
:alt="image.alt"
class="grid-image"
@error="handleImageError"
/>
</div>
</div>
</template>响应式网格布局
使用 CSS Grid 实现自适应布局,确保图片在不同屏幕尺寸下合理排列：
<style scoped>
.image-grid {
display: grid;
/* 自动填充列：最小宽度200px，最大1fr比例 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
padding: 20px;
}
.grid-row {
/ 关键：使行不占实际布局空间，由子元素直接参与网格布局 /
display: contents;
}
.grid-image {
width: 100%;
height: 180px;
object-fit: cover; / 保持比例填充容器 /
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-image:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
布局解析：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))：自动创建列，每列最小宽度 200px，剩余空间按比例分配display: contents：消除行容器对网格布局的干扰，使图片直接成为网格项
进阶优化：性能与体验增强
图片加载失败处理
通过 @error 事件捕获加载失败,显示占位图并记录错误：
methods: {
handleImageError(event) {
const img = event.target;
img.src = '/assets/placeholder.jpg'; // 本地占位图
img.classList.add('error-state');
// 可选：上报错误日志
console.error(`图片加载失败: ${img.alt}`);
}
}在样式中添加错误状态样式：
.grid-image.error-state {
background-color: #f5f5f5;
