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 样式，但是

和 中不允许嵌套其它标签，
如果按照上面这种写法，

和 之间会多了一层 ，这时候 css 样式就会失效，

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

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

安装fragment

    npm i -s vue-fragment

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

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