vue - fragment

注:在 vue3 中,已经直接引入了 fragment。

业务场景如下:

<div class="">
    <fragment v-for="(item in list)">
    <span v-if="item.a=1">男</span>
    <span v-if="item.a=0">女</span>
  </fragment>
<div>

很多情况下,前端设计好了非常精妙的 css 样式,但是 div 和 span 中不允许嵌套其它标签,
如果按照上面这种写法,div 和 span 之间会多了一层 fragment,这时候 css 样式就会失效,

最直接的例子就是 element-ui 中的菜单栏,它就存在这个问题,但是也很明显,并不存在其它的写法。

我们希望 标签只负责逻辑,但不渲染任何内容,这时候安装 vue-fragment 插件即可。

安装fragment

    npm i -s vue-fragment

调整 main.js,将 fragment 添加到 vue 中

    import Fragment from 'vue-fragment'
    vue.use(Fragment.Plugin)

posted on   疯狂的妞妞  阅读(2858)  评论(0编辑  收藏  举报

(评论功能已被禁用)
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示