Vue——空标签

业务场景如下：

<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中不允许嵌套其它层级，

如果按照上面这种写法，

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

最常见的就是element-ui中的菜单栏，但是也很明显，并不存在其它的写法。

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

安装fragment

npm i -s vue-fragment

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

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

vue

相关