estpzit 2022-04-19 10:41 采纳率: 80%
浏览 193
已结题

vue中的标签中的key属性

问题遇到的现象和发生背景

下方代码,为什么用key?

<router-link key="collapse"> 
问题相关代码,请勿粘贴截图
<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link key="collapse" class="sidebar-logo-link" to="/">
        <img src="@/assets/common/logo.png" class="sidebar-logo">
      </router-link>
    </transition>
  </div>
</template>
...
props: {
  collapse: {
    type: Boolean,
    required: true
  }
}


运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

2条回答 默认 最新

  • 雾里桃花 2022-04-19 11:15
    关注

    vue中的key属性是为了更为快速的建立虚拟dom所准备的,一般使用在for循环中,key也可以用来表明当前节点的唯一身份,尤其是像v-for这种循环出来的列表,节点几乎都是一模一样的,这时候为每个节点添加key属性 可以使虚拟dom更为清晰的分辨出每个节点的身份
    key属性也可以用在一些其他的地方,像vue中的router-view,如果你在router-view包裹了transition 节点,这是就要为router-view动态的添加一个key属性,用于表示当前的url已经变更,vue检测到了key属性的变化就会重新执行一次transition动画,否则如果不添加key属性,vue检测不到url的变更,动画效果就只会在初始时执行一次

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月19日

悬赏问题

  • ¥15 基于ucc28019的pfc电路中芯片一直不工作
  • ¥15 yolov8在3588板子端c++推理报错
  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能