Vue 列表渲染：v-for 指令详解与最佳实践

Vue\u7684\u5217\u8868\u6f14\u793a\u6307\u7684\u662f\u4f7f\u7528\u201cv-for\u201d\u6307\u4ee4\u5728\u201cVue\u6a21\u677f\u201d\u4e2d\u5faa\u73af\u6f14\u793a\u5217\u8868\u6570\u636e\u3002\u5217\u8868\u6f14\u793a\u53ef\u4ee5\u5c06\u4e00\u4e2a\u6570\u7ec4\u6216\u8005\u5bf9\u8c61\u7684\u6570\u636e\u6bcf\u4e2a\u6f14\u793a\u5230\u6a21\u677f\u4e2d\uff0c\u751f\u6210\u591a\u4e2a\u76f8\u540c\u6216\u8005\u76f8\u4f3c\u7684\u5143\u7d20\u3002\n\n\u4f7f\u7528\u201cv-for\u201d\u6307\u4ee4\u5728\u6a21\u677f\u4e2d\u53ef\u4ee5\u4f7f\u7528\u7c7b\u4f3c\u4e8e\u201cfor\u5faa\u73af\u201d\u7684\u8bed\u6cd5\u6765\u5faa\u73af\u8d85\u753b\u6570\u636e\uff0c\u5e76\u5c06\u6bcf\u4e2a\u6570\u636e\u9879\u6f14\u793a\u5230\u6307\u5b9a\u7684\u6a21\u677f\u4e2d\u3002\u201cv-for\u201d\u6307\u4ee4\u7684\u8bed\u6cd5\u5982\u4e0b\uff1a\n\nhtml\n<div v-for\u003d\"item in items\" :key\u003d\"item.id\">{{ item.name }}\</div>\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u201cv-for\u201d\u6307\u4ee4\u5faa\u73af\u4e86\u540d\u4e3a\u201citems\u201d\u7684\u6570\u7ec4\uff0c\u5e76\u5c06\u6570\u7ec4\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20\u8d4b\u503c\u7ed9\u53d8\u91cf\u201citem\u201d\u3002\u7136\u540e\u5728\u6a21\u677f\u4e2d\u4f7f\u7528\u201citem.name\u201d\u6765\u6f14\u793a\u6bcf\u4e2a\u5143\u7d20\u7684\u540d\u79f0\u3002\n\n\u201cv-for\u201d\u6307\u4ee4\u8fd8\u53ef\u4ee5\u63d0\u4f9b\u4e00\u4e2a\u53ef\u9009\u7684\u7d22\u5f15\u53c2\u6570\u6765\u83b7\u53d6\u5f53\u524d\u5143\u7d20\u5728\u6570\u7ec4\u4e2d\u7684\u7d22\u5f15\uff1a\n\nhtml\n<div v-for\u003d\"(item, index) in items\" :key\u003d\"item.id\">{{ index }} - {{ item.name }}\</div>\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u9664\u4e86\u201citem\u201d\u53c2\u6570\u4e4b\u5916\uff0c\u8fd8\u6dfb\u52a0\u4e86\u201cindex\u201d\u53c2\u6570\u6765\u83b7\u53d6\u5f53\u524d\u5143\u7d20\u7684\u7d22\u5f15\u3002\n\n\u9664\u4e86\u5faa\u73af\u6570\u7ec4\u4e4b\u5916\uff0c\u201cv-for\u201d\u6307\u4ee4\u8fd8\u53ef\u4ee5\u5faa\u73af\u5bf9\u8c61\u7684\u5c5e\u6027\uff1a\n\nhtml\n<div v-for\u003d\"(value, key) in object\">{{ key }}: {{ value }}\</div>\n\n\n\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u201cv-for\u201d\u6307\u4ee4\u5faa\u73af\u4e86\u540d\u4e3a\u201cobject\u201d\u7684\u5bf9\u8c61\uff0c\u5e76\u5c06\u5bf9\u8c61\u7684\u6bcf\u4e2a\u5c5e\u6027\u7684\u503c\u8d4b\u503c\u7ed9\u201cvalue\u201d\u53d8\u91cf\uff0c\u5c5e\u6027\u7684\u952e\u8d4b\u503c\u7ed9\u201ckey\u201d\u53d8\u91cf\u3002\n\n\u5728\u4f7f\u7528\u201cv-for\u201d\u6307\u4ee4\u6f14\u793a\u5217\u8868\u65f6\uff0c\u9700\u8981\u4e3a\u6bcf\u4e2a\u751f\u6210\u7684\u5143\u7d20\u6dfb\u52a0\u4e00\u4e2a\u552f\u4e00\u7684\u201ckey\u201d\u5c5e\u6027\uff0c\u4fbf\u4e14\u201cVue\u201d\u80fd\u591f\u8ffd\u8e4a\u6bcf\u4e2a\u5143\u7d20\u7684\u8eab\u4efd\uff0c\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u6f14\u793a\u3002\n\n\u603b\u7684\u6765\u8bf4\uff0c\u201cVue\u201d\u7684\u5217\u8868\u6f14\u793a\u529f\u80fd\u975e\u5e38\u5f3a\u5927\u548c\u7075\u6d3b\uff0c\u53ef\u4ee5\u8f7b\u677e\u5730\u5904\u7406\u5404\u79cd\u590d\u6742\u7684\u5217\u8868\u6570\u636e\uff0c\u5e76\u5c06\u5b83\u4eec\u6f14\u793a\u5230\u6a21\u677f\u4e2d\u3002\u540c\u65f6\uff0c\u201cVue\u201d\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5176\u4ed6\u7684\u5217\u8868\u6f14\u793a\u76f8\u5173\u7684\u6307\u4ee4\u548c\u65b9\u6cd5\uff0c\u5982\u201cv-if\u201d\u3001\u201cv-show\u201d\u3001\u6570\u7ec4\u66f4\u65b0\u68c0\u6d4b\u7b49\uff0c\u8fdb\u4e00\u6b65\u589e\u5f3a\u4e86\u5217\u8868\u6f14\u793a\u7684\u529f\u80fd\u548c\u6027\u80fd\u3002