温州市建设工程质量监督站网站,10元建站,台州网站制作教程,环球外贸论坛官网vue3中的Fragment 模版碎片特性是什么#xff0c;简单的理解就是template模板代码不在像vue2中那样必须在根节点在包裹一层节点了。
vue2写法
templatedivh1标题/h1p正文内容/p/div
/templatevue3写法
简单的理解就是template模板代码不在像vue2中那样必须在根节点在包裹一层节点了。
vue2写法
templatedivh1标题/h1p正文内容/p/div
/template
vue3写法
templateh1标题/h1p正文内容/p
/template
vue3中Fragment特性的一个bug需要留意的问题
组件HelloWorld:
templateh12333/h1h1666/h1
/template组件HelloWorld的使用
templateHelloWorld v-ifshowBool / !--v-if正常--HelloWorld v-showshowBool / !--v-show异常,showBool为false还是显示了--
/template
script langts 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的写法那样根节点在包裹一层就行了。 组件
templatedivh1标题/h1p正文内容/p/div
/template
dom结构发现v-show的display:none属性有了。 目前vue3.4.15这个问题仍然是没有解决的。在使用的时候还是需要注意。
