当前位置: 首页 > news >正文

vue3中Fragment特性的一个bug,需要留意的注意事项

vue3中的Fragment 模版碎片特性是什么,简单的理解就是template模板代码不在像vue2中那样必须在根节点在包裹一层节点了。

vue2写法
<template><div><h1>标题</h1><p>正文内容</p></div>
</template>
vue3写法
<template><h1>标题</h1><p>正文内容</p>
</template>
vue3中Fragment特性的一个bug(需要留意的问题)

组件HelloWorld:

<template><h1>2333</h1><h1>666</h1>
</template>

组件HelloWorld的使用

<template><HelloWorld v-if="showBool" /> <!--v-if正常--><HelloWorld v-show="showBool" /> <!--v-show异常,showBool为false还是显示了-->
</template>
<script lang="ts" setup>
import HelloWorld from '../components/HelloWorld.vue'
const showBool = ref(false);
<scrip>

同时控制台waring :

 [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. 

利用开发者模式看dom结构,发现v-show的display:none属性完全是没有的

在这里插入图片描述

解决方法

还是遵循vue2的写法那样,根节点在包裹一层就行了。
组件:

<template><div><h1>标题</h1><p>正文内容</p></div>
</template>

dom结构发现v-show的display:none属性有了

在这里插入图片描述

目前vue3.4.15这个问题仍然是没有解决的。在使用的时候还是需要注意。

相关文章:

  • redis-exporter grafana面板配置
  • linux SSH/Telnet/Shell/CMD终端软件之WindTerm
  • 定时获取微博热搜数据
  • 《WebKit 技术内幕》之五(1): HTML解释器和DOM 模型
  • 深度学习模型之yolov8实例分割模型TesorRT部署-python版本
  • Dell戴尔XPS 8930笔记本电脑原装Win10系统 恢复出厂预装OEM系统
  • c JPEG 1D DCT 优化1
  • Camera基础原理与畸变补偿
  • Webpack5入门到原理22:提升打包构建速度
  • EtherNet/IP开发:C++开发CIP源代码
  • 9-数组- 除自身以外数组的乘积
  • 开发实战角度:distinct实现原理及具体优化总结
  • 【QT+QGIS跨平台编译】之一:【sqlite+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
  • QMediaPlayer 类的应用--音频播放器
  • 专门为机器学习开发的jpy语言
  • [rust! #004] [译] Rust 的内置 Traits, 使用场景, 方式, 和原因
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • docker容器内的网络抓包
  • emacs初体验
  • JavaScript服务器推送技术之 WebSocket
  • JavaScript设计模式与开发实践系列之策略模式
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • Js基础知识(一) - 变量
  • Just for fun——迅速写完快速排序
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • Linux中的硬链接与软链接
  • nginx 配置多 域名 + 多 https
  • oldjun 检测网站的经验
  • PhantomJS 安装
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 给初学者:JavaScript 中数组操作注意点
  • 看图轻松理解数据结构与算法系列(基于数组的栈)
  • 如何优雅地使用 Sublime Text
  • 深度学习入门:10门免费线上课程推荐
  • 深入浏览器事件循环的本质
  • 使用Gradle第一次构建Java程序
  • 系统认识JavaScript正则表达式
  • 中文输入法与React文本输入框的问题与解决方案
  • const的用法,特别是用在函数前面与后面的区别
  • 大数据全解:定义、价值及挑战
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • #android不同版本废弃api,新api。
  • (175)FPGA门控时钟技术
  • (zhuan) 一些RL的文献(及笔记)
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .net 调用php,php 调用.net com组件 --
  • .net 怎么循环得到数组里的值_关于js数组
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证
  • .NET开发不可不知、不可不用的辅助类(一)
  • .NET与java的MVC模式(2):struts2核心工作流程与原理