业务场景如下:
<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中的菜单栏,但是也很明显,并不存在其它的写法。
这时候,我们希望fragment标签只负责逻辑,但不渲染任何内容,这时候安装vue-fragment插件即可。
安装fragment
npm i -s vue-fragment
调整main.js,将fragment添加到Vue中
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)