【Vue】v-for中:key中item.id与Index使用的区别

先说结论，推荐使用【:key="item.id"】而不是将数组下标当做唯一标识，前者能做到全部复用

场景：删除无序列表中的
标签


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个Vue实例title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js">script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous">script>
head>
<body>
    <div class="container">
        <div id="app">
            
            
            <li class="1">1li>
            <li class="2">2li>
            <li class="3">3li>
            <li class="4">4li>
            <li class="5">5li>
            
            
            <li class="1">1li>
            <li class="2">2li>
            <li class="4">4li>
            <li class="5">5li>
            
            <li class="1">1li>
            <li class="2">2li>
            <li class="3">4li>
            <li class="4">5li>
            
            
            <li class="1">1li>
            <li class="2">2li>
            <li class="3">4li>
            <li class="4">5li>
            
            
        div>
    div>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
            },
            methods:{
 
            }
        })
    script>
body>
    
html>

相关阅读:
CSP-2023 复赛游记
【Linux进程篇】进程地址空间
【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口
【视频】机器学习交叉验证CV原理及R语言主成分PCA回归分析犯罪率|数据共享
22-07-20 西安 SpringCloud（01）
word2vec中的skip-gram--学习笔记
判断是否相等 hasChanged
解读宁波IATF16949认证：开启成功之门的钥匙️
能源企业如何构建网络安全体系？8月18日实战专家在线分享破局之道
【重拾C语言】十三、动态数据组织（二）链表（创建、遍历检索、插入、删除、交换）

原文地址：https://blog.csdn.net/lklalmq/article/details/136196972