Vue的条件渲染之用key管理可复用的元素

最新推荐文章于 2022-07-12 22:28:39 发布
最新推荐文章于 2022-07-12 22:28:39 发布
阅读量368 收藏
点赞数
分类专栏： 前端 Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SEU_YL/article/details/107461655
版权
Vue采用复用元素机制以提高渲染效率，但这也可能导致元素状态被保留。当元素内容需要更新时，如切换登录方式后input内容不变，就会出现坑。为避免这种情况，可以在元素或组件上使用key属性来指定唯一标识，从而控制它们的复用。
摘要由CSDN通过智能技术生成

Vue的可复用元素机制

Vue为了更高效地渲染元素，采用了复用元素机制，这样做是为了高效以及一些其他的好处。例（官网）：

<template v-if="loginType === 'username'">
  <label>Username</label>
最低0.47元/天 解锁文章
SEU_YL
关注
专栏目录
vue的条件渲染
weixin_52339077的博客
09-28 927
vue的条件渲染
vue中使用key管理可复用的元素
weixin_34112900的博客
04-24 319
1、概述 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 key解决上述问题之外的情景：这两个元素是完全独立的，不要复用它们。 2、示例 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; ...
vue 用 key 管理可复用的元素
weixin_43151921的博客
05-24 619
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email&...
条件渲染#用key管理可复用元素
我想成长的快一点，再快一点...
08-12 135
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v
【Vue】用 key 管理可复用的元素
Owen的博客
12-13 270
<div v-if="show"><label>用户名</label><input type="text" placeholder="用户名"></div> <div v-else><label>邮箱</label><input type="text" placeholder="邮箱"></div> 问题描述：当show为 false 时，邮箱的 input 框内，会存在用户名输入的.
vue用 key 管理可复用的元素
qq_41445106的博客
09-20 258
今天在看vue官网时对于用 key 管理可复用的元素部分效果实现时给的不是很完全，点击切换时应该怎么切换的问题，后来想到利用三目运算符来实现效果，下面给出详细代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
详解key在Vue列表渲染时究竟起到了什么作用
10-17
在Vue框架中，列表渲染是经常会使用到的一种技术手段，而为了使列表渲染更加高效和准确，Vue规定我们在使用v-for指令进行列表渲染时，必须为每个列表项分配一个唯一的key值。这个key在Vue的渲染过程中扮演着非常重要...
深入理解Vue 的条件渲染和列表渲染
08-29
在上面的代码中，我们使用 key 属性来指定每个元素的唯一标识符，以便 Vue.js 可以正确地渲染每个元素。 Vue.js 的条件渲染和列表渲染是非常强大和灵活的机制，可以帮助我们轻松地实现复杂的界面逻辑。但是，需要...
用key值管理可复用的元素？
kk的博客
07-12 341
Vue中用key值管理可复用的元素？
Vue 用 key 管理可复用的元素
qq_39039128的博客
03-27 279
起源： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> li{ list-style: none; } </style> ...
用key管理可复用元素
XYLH2015的博客
10-21 180
先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处，那就是在切换input时不会清楚里面的数据。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-...
vue用key管理可重复用的元素
userzou的博客
05-25 149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <te..
2020-11-24 v-if v-show key 元素的复用
qq_44917015的博客
11-24 143
<input type="text" v-model="type"> <br> <span v-if="type==1">哈哈哈哈</span> <span v-else-if="type==2">呵呵呵呵</span> <span v-else-if="type==3">嘿嘿嘿嘿</span&
Vue中key的重要作用
drawlessonsfrom的博客
04-29 437
一、使用key管理可复用的元素 1、相关示例如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if-key</title> </head> <body> <div id="app"> <template v-if="
Vue.js用Key值来管理可复用元素
sunny_day的博客
05-15 6409
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。1.那么在上面的代码中切换type将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,input不会被替换掉——仅仅是替换了它的placeholder。&lt;body&gt; &lt;div id="yk3"&gt; &lt;div v-if="type=...
Vue组件的复用 / key
weixin_30338497的博客
09-16 707
用key管理可复用的元素 例1 <script src="https://unpkg.com/vue"></script> <div id="app"> <template v-if="ok==='username'"> 用户名: <input type="text" placeholder="请输...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值