key也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:

  • 完整地触发组件的生命周期钩子
  • 触发过渡

例如:

<transition>
<span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。

vue key 的另外一个用法 过度的更多相关文章

  1. Vue组件的is具体用法

    1.为什么要使用is 在vue的官网组件部分中,有明确的描述:当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因 ...

  2. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  3. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  4. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  5. vue element-ui怎样提炼一个自己写的js当作公共js

    vue element-ui怎样提炼一个自己写的js当作公共js请教一下各位大神,我刚刚触摸vue element-ui几天,写的一个清晰检索的input框,现在需当作项目公共的部分,可遭需的html ...

  6. vue 学前班002(创建一个实例)

    创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...

  7. PHP 获取数组随意下标key的上一个prev和下一个next下标值

    PHP 获取数组随意下标key的上一个prev和下一个next下标值 <? php $xoops[1] = '小'; $xoops[2] = '孩'; $xoops[3] = '子'; $xoo ...

  8. VUE -- vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  9. WPF x:key和x:name用法

    WPF x:key和x:name用法 x:Key用在xaml Resources,ResourceDictionary需要key来访问 x:Name用在ResourceDictionary以外任何地方 ...

随机推荐

  1. eslint规范项目代码

    安装一系列eslint插件后,填写eslint配置,配置如下 .editorconfig root = true [*] charset = utf-8 indent_style = space in ...

  2. 【bzoj3930】[CQOI2015]选数 莫比乌斯反演+杜教筛

    题目描述 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公约数,以便进一 ...

  3. Tomcat网站根目录的配置

    在</Host>前插入: <Host> … … <Context path="" docBase="E:\Users\Administrat ...

  4. 计数(count)

    计数(count) 题目描述 既然是萌萌哒 visit_world 的比赛,那必然会有一道计数题啦! 考虑一个 NN个节点的二叉树,它的节点被标上了 1∼N1∼N 的编号. 并且,编号为 ii的节点在 ...

  5. bzoj4292 PA2015 Równanie 枚举

    貌似应该是找出n后,带回去看看是不是对的. #include<cstdio> #include<cstring> #include<algorithm> #incl ...

  6. 【07】node 之 Buffer

    1.1.  Buffer基本概念 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.二进制可以存储电脑中任何数据(比如:一段文本.一张图片.一个硬盘,应该说电脑中所有的数据都是二进 ...

  7. Crash的数字表格(bzoj 2054)

    Description 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时被a和b整除的最小正整数.例如 ...

  8. 洛谷 [P1337] 平衡点

    模拟退火练手 一道模拟退火的好题 结果一定势能最小 与模拟退火思路高度一致 #include <iostream> #include <cstdio> #include < ...

  9. wap提交表单

    原文发布时间为:2010-08-31 -- 来源于本人的百度文章 [由搬家工具导入] <%@ page contentType="text/vnd.wap.wml" page ...

  10. android基本控件学习-----Date&Time

    Date&Time这里一共讲解下面6个: TextClock(文本时钟),AnalogClock(模拟时钟),Chronometer(计时器),DatePicker(日期选择器),TimePi ...