前言:

        众所周知,vue3突破了每一个vue文件中只能有一个根标签的限制,但是我们还有很多项目都是vue2的项目,如果让vue2中实现一个类似</>的效果呢,像react的16.2.0的版本之后,可以直接用<></>,vue3中使用tsx也可以轻松使用<></>,vue2要想实现这种效果,需要借助一个插件 vue-fragment。

实现效果:

1、使用div包起来的效果

2、使用我们插件包起来的效果

实现步骤:

1、安装,npm/cnpm/pnpm都是下面的,yarn的话 是第二个
npm i vue-fragment -S
yarn install vue-fragment -S
2、main.js中引入
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
3、页面代码中直接包起来
<fragment>

       你的内容
</fragment>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐