v-if与v-show造成部分元素丢失的问题——v-if复用元素问题

这篇具有很好参考价值的文章主要介绍了v-if与v-show造成部分元素丢失的问题——v-if复用元素问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述

在写tab切换时遇到了一个问题,以下为简化后的问题所在的代码:

<img v-if="tabIndex === 2" id="t1">
<div v-if="tabIndex === 2" id="t2"></div>
<div v-if="tabIndex === 2" id="t3"></div>
<div v-show="tabIndex === 2" id="t4">
    <div id="content"></div>
</div>

当页面加载时,先向id为content的div中添加了一些元素:

function addContent() {
    const newDiv = document.createElement('div');
    newDiv.innerHTML = '123456789';
    document.getElementById('content').appendChild(newDiv);
}
  • 如果当tabIndex为2时执行addContent(),上述123456789能够正常显示;
  • 但如果:
    • 在此时将tabIndex改为1,再将tabIndex改为2,
    • 或者在tabIndex不为2时执行addContent(),再将tabIndex改为2,
      这两种情况下,123456789都无法正常显示。

问题探索

首先尝试将目标元素输出到控制台。在切换tabIndex前,先获取原来的元素:

var oldT4 = document.getElementById('t4');
var oldContent = document.getElementById('content');

此时输出显然能得到正确的结果。
然后在切换tabIndex后,再获取新的元素:

var newT4 = document.getElementById('t4');
var newContent = document.getElementById('content');
console.log(oldT4, newT4);
console.log(oldContent, newContent);

此时会发现:

  • oldContent元素虽然能正常输出,但在页面上已经不存在了,此时oldContent仅仅是引用了一个不存在的元素;
  • newContent元素就是当前页面上的content元素,但其中的内容已被清空。
  • newT4元素就是当前页面上的t4元素。
  • oldT4却离奇的变为了t2元素,console.log(oldT4 === document.getElementById('t2'))的结果为true
    v-if与v-show造成部分元素丢失的问题——v-if复用元素问题

问题原因

这是因为t4tabIndex切换时,复用了被v-if隐藏的t2元素,复用时会重新渲染t4内的所有内容,这种情况下,动态添加到content元素中的内容就会被清空。
这里复用的顺序则是从第一个同样为div的被v-if隐藏的元素开始复用,即t2元素。类似的,如果此时进一步将t2元素的v-if修改成v-show,则oldT4就会去复用t3元素。

解决方案

要保留content元素中的内容,可以考虑:文章来源地址https://www.toymoban.com/news/detail-411936.html

  1. t2t3v-if改成v-show
  2. 如果确实不方便修改v-if,则可以给t2t3添加key属性,使其不会被复用。

到了这里,关于v-if与v-show造成部分元素丢失的问题——v-if复用元素问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 中 v-if 和 v-show 的区别

    v-if  和  v-show  是 Vue.js 中常用的条件渲染指令,它们的作用是根据条件来控制元素的显示与隐藏。 格式也差不多: 当 isShow 为 true 时显示当前元素,为 false 时隐藏 虽然它们的效果类似,但是它们在实现原理和使用场景上有一些区别。 1. 实现原理: v-if :根据条件动态添加

    2024年02月16日
    浏览(33)
  • VUE v-if 和 v-show 区别和例子

    在Vue中,v-if和v-show是两种常用的指令,用于控制组件的显示和隐藏。下面是一些使用v-if和v-show的例子: v-if 在编译过程中会被转化成三元表达式,条件不满⾜时不渲染此节点。 v-show 会被编译成指令,条件不满⾜时控制样式将对应节点隐藏(display:none) v-if html template     di

    2024年01月22日
    浏览(41)
  • Vue中v-if与v-show区别详解

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月21日
    浏览(43)
  • Vue.js 中的 v-if 和 v-show 有什么区别?

    在 Vue.js 中,v-if 和 v-show 都是用来控制元素的显示和隐藏的指令。但是,它们之间有一些区别。本文将深入探讨 v-if 和 v-show 的区别,并给出一些相关的代码示例。 v-if 是一种条件渲染指令,它根据表达式的值来决定是否渲染元素。如果表达式的值为 true,那么元素将被渲染;

    2024年02月08日
    浏览(47)
  • vue中v-if和v-show的区别和使用场景

            问题:v-if和v-show我们都经常用来控制某一部分内容的显示与隐藏,那么其具体区别是什么呢? 1.v-if v-if是通过增添和删除DOM来控制元素的显示与隐藏的 当判断值为true时在DOM树中加入该DOM元素 当判断值为false时在DOM树中删除该DOM元素  2.v-show v-show是通过改变该元素

    2024年02月03日
    浏览(32)
  • vue: v-show 和 v-if 指令控制盒子的显示隐藏

    1. v-show     语法:  v-show=\\\"布尔值\\\"    (true显示, false隐藏)     原理:  实质是在控制元素的 css 样式,  `display: none;` 2. v-if       语法: v-if=\\\"布尔值\\\"   (true显示, false隐藏)     原理:  实质是在动态的 创建 或者 删除 元素节点 应用场景:          1. 如果是频繁的切换显

    2024年02月09日
    浏览(59)
  • React V6实现v-if、v-show、v-html

    功能背景 在vue中使用v-if、v-show、v-html这些命令得心应手,那么react是否也存在这样的命令呢?似乎是没有的,需要自己实现,也就是用原生的写法直接控制dom。 实际效果 代码实现

    2024年02月11日
    浏览(39)
  • vue基础知识六:v-show和v-if有什么区别?使用场景分别是什么?

    一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示 在用法上也是相同的 当表达式为true的时候,都会占据页面的位置 当表达式都为false时,都不会占据页面位置 二、v-show与v-if的区别 控制手段不同 编译过程

    2024年02月09日
    浏览(39)
  • FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序

    使用template可以使其里面的内容在html的结构中不变。条件渲染: v-if 1)v-if=“表达式” 2)v-else-if=“表达式” 3)v-else {} 适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”。 v-show 写法:

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包