Vue起步_v-if条件渲染中的key值问题

最新推荐文章于 2023-11-11 12:51:32 发布
最新推荐文章于 2023-11-11 12:51:32 发布
阅读量4.9k 收藏 4
点赞数 1
分类专栏： Vue学习笔记 文章标签： vue 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17832583/article/details/80567697
版权 
<body>
  <div id="app">
    <div v-if="show">
      用户名：<input />
    </div>
    <div v-else> 
      邮箱：<input />
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        show: false
      }
    })
  </script>
</body>


发现用户名中的input框未清空。原因是dom复用。

为每一个input框增加一个key值，不同key值的input框就不会复用了。



小斌斌阿
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue条件渲染——v-if和v-else，v-show和key值
weixin_44561961的博客
06-04 398
文章目录前言一、v-if，v-else，v-show和key值二、使用步骤1.引入库总结 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、v-if，v-else，v-show和key值 前三者都属于条件判断，key值会让标签成为唯一，不会被复用 二、使用步骤 1.引入库 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></.
VUE初学--条件渲染v-if、v-else、v-else-if 以及 v-if管理复用 key 学习、v-show
qq_42970981的博客
11-15 719
v-if
v-if和v-for优先级顺序以及key的作用
bestyinjun的专栏
08-14 114
v-if和v-for优先级顺序以及key的作用
v-if中的key值
Zy000428的博客
09-13 444
在Vue.js中,v-if指令用于条件性的渲染元素。它的key属性是一个可选的属性,用于帮助Vue.js区分每个不同的渲染元素。当v-if的条件发生变化时,Vue.js会使用key属性来确定哪些元素需要被替换,哪些元素需要被保留。key属性的值应该是唯一且稳定的,通常使用一个唯一的标识符或者一个能唯一标识元素的属性值。这样可以确保Vue.js能正确地追踪每个元素的状态,并避免不必要的重新渲染。key的值不要用index，因为index没有唯一性,尽量要把id作为key的值(因为id属性值具有唯一性)
vue v-if 加key值的作用
rose999ying的博客
07-08 6343
<div id="app"> <template v-if="type === 'name'"> <label>用户名：</label> <input type="text" placeholder="请输入用户名..."> </template> <template ...
vue强制刷新dom（使用v-if）（添加key）
believet93的博客
07-10 5232
最近在一个项目中遇到一个问题，点击按钮后，只能通过子组件向后端请求数据，但是点击按钮并不能重新加载子组件，因此无法向后端请求数据。 这里我们的子组件为 childComponent，实现刷新的方法如下： <childComponent v-if="refresh"></childComponent> <button @click="handleClick"></button> handleClick() { this.refresh = fa
条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）
Code Writers
11-30 850
key是虚拟对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。
VUE中V-IF条件判断改变元素的样式操作
10-14
主要介绍了VUE中V-IF条件判断改变元素的样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
解决vue v-for 遍历循环时key值报错的问题
10-18
在Vue.js中，`v-for`指令用于遍历数组或对象，它是一个非常重要的功能，但如果不正确地使用`key`属性，可能会遇到警告或性能问题。本文将深入探讨这个问题，帮助你理解如何正确处理`v-for`循环中的`key`值。 首先，...
vue2和vue3的v-if与v-for优先级对比学习
01-18
Vue.js 中使用最多的两个指令就是 v-if 和 v-for ，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式： 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-...
vue中的key的作用？
热门推荐
weixin_47450807的博客
03-26 1万+
一、写在前面 下面总结一下，vue中的key的作用，在vue中我们可能在两种情况下使用key，第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key。下面我们来看一下key在其中起到的作用。 二、在v-if中使用key 首先我们先看在vue中出现的一种情况，我们在vue中如果使用v-if进行切换时，此时Vue为了更加高效的渲染，此时会进行前后比较，如果切换前后都存在的元素，则直接复用。如果我们在模板中切换前后都存在input框，此时我们在input框中写入一些数据，并且进行页面切换，则原有的
Vue之v-if key v-show
__盛某人的博客
03-12 353
v-if //if eles-if else必须连续使用，表达式为真时显示 <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <d...
vue[强制刷新组件之$forceupdate、v-if、key属性三种方式的适用]
墨水白云的博客
05-28 9960
有时候我们会遇到一些问题，例如：弹出框在填写完毕后隐藏，然后再次点击打开的时候内容确还是原来的，此时需要刷新组件来操作。又或者有些时候我们需要强制触发组件的刷新以便于让整个组件的生命周期得以重新执行。 本例探讨强制刷新组件的操作。 第一种方式： ...
v-if 不加 key的后果
weixin_48357279的博客
09-03 509
在百度上好一顿查找 才晓得当渲染多个同样数据时 如果要使用v-if进行销毁时 需要加key值 以我的理解就是让浏览器知道销毁的是哪一个组件 若不加key 浏览器会默认渲染下一个组件 认为不用销毁。开始的想法是 没有加key值 直接使用 v-if 测试时发现 当点击切换布局时 布局改变了 尺寸未改变 视频也没有重新刷新。众所周知 v-if和v-show的区别就是 v-show是显示隐藏 v-show是销毁和展示。最近遇到一个场景 要求一个页面渲染多个同样的萤石云视频组件。
Vue2（三）：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_42044763的博客
08-12 2046
写法:class=“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2.绑定style样式 其中xxx是动态值。 其中a、b是样式对象。 二、条件渲染 1.v-if 写法: (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式” 适用于：切换频率较低的场景。（因为会动DOM树，节点删来删去不
Vue数据绑定失败，v-if，:key，变异方法刷新无用的解决方案
最新发布
m0_62402896的博客
11-11 475
Vue数据绑定失败，v-if，:key，变异方法刷新无用的解决方案，可能是绑定的逻辑没有直接修改
VUE3的一些实用技巧
Cool_so_cool的博客
02-08 847
1，v-for 和 v-if 不要一起使用（Vue2） 此优化技巧仅限于Vue2，Vue3 中对 v-for 和 v-if 的优先级做了调整， 永远不要把 v-if 和 v-for 同时用在同一个元素上 原因是 v-for 的 优先级高于 v-if，所以当它们使用再同一个标签上是，每一个渲染都会先循环再进行条件判断 注意： Vue3 中 v-if 优先级高于 v-for，所以当 v-for 和 v-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果 例如下面这段代码在 Vue2 中是不被推
在Vue3中v-if条件使用方式
04-03
在Vue3中，v-if条件使用方式与Vue2基本相同，但是有一些细微的改动。 1. 语法 Vue3中的v-if语法与Vue2相同，使用v-if指令定义条件语句。 ``` <div v-if="condition">...</div> ``` 2. 懒渲染 Vue3中的v-if指令支持懒渲染，即当条件为false时，组件不会被渲染到DOM中，这可以提高页面性能。 ``` <template> <div> <button @click="show = !show">Toggle</button> <div v-if="show" lazy>Lazy Rendered</div> </div> </template> ``` 在上面的例子中，当show为false时，lazy属性会告诉Vue3不要渲染这个组件，直到show为true时再进行渲染。 3. v-if和v-for的优先级问题 在Vue2中，v-for指令的优先级比v-if高，这意味着当v-for和v-if同时存在时，v-if会在v-for之前执行。例如： ``` <div v-for="item in items" v-if="item.show">{{item.name}}</div> ``` 在上面的例子中，如果items数组中的所有item都没有show属性或show属性为false，那么这个v-for指令就会无效，因为没有任何内容会被渲染。 在Vue3中，v-if的优先级高于v-for，这意味着即使没有任何item满足条件，v-for指令仍然会渲染出一个空的列表。 ``` <div v-for="item in items" v-if="item.show">{{item.name}}</div> ``` 在上面的例子中，即使没有任何item满足条件，v-for指令仍然会生成一个空的列表，因为v-if的优先级高于v-for。 需要注意的是，这种行为可能会影响页面性能，因为即使列表为空，Vue3仍然需要执行v-for指令。因此，在使用v-if和v-for时应该谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值