Vue系列之（二）——Vue中的v-for到底做了什么？

最新推荐文章于 2024-07-24 12:54:56 发布

Claire小柒

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量5.3k

点赞数 9

分类专栏： JS技术 vue 文章标签： vue

本文链接：https://blog.csdn.net/Claire_Moon/article/details/100021933

版权

本文详细探讨Vue的v-for指令，解释其背后的“就地复用”策略，强调在使用v-for时添加唯一key的重要性。通过实例分析了key属性如何解决复用导致的问题，以及未唯一key可能带来的列表渲染混乱。同时，提到了原生JS实现类似v-for的效果。

摘要由CSDN通过智能技术生成

循环使用 v-for 指令。

先来了解一下v-for的原理，话不多说，先看代码~
完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02v-for</title>
</head>

<body>
    <div id='app'>
        <prolist></prolist>
    </div>
</body>
<template id="prolist">
    <ul>
        <li v-for=