vue中通过iframe方式加载本地html

vue中通过iframe方式加载本地html

     vue是一个组件式的前端开发,我们在通过vue做前端开发的时候经常会有这样的业务需要。

如何将本地的原生js或jquery实现的html嵌入到vue的组件中进行展示。

实现效果:

vue中通过iframe方式加载本地html_第1张图片

如图所示:

导航栏、按钮控件、评分控件都是通过vue组件组装实现。

银河星图是通过ifame加载本地html实现的。

 

实现思路:

1、在src平级的文件目录下新建public文件夹

2、在public文件夹下编码html代码,包括相应的本地资源,js、css

3、在vue组件中通过ifame加载html文件

 

实现代码:

index.html:




  
  基于HTML5 WebGL的3D星云动画特效DEMO演示
  

  
  
      

  



  

		
      




Home.vue:

 

 

    

你可能感兴趣的:(vue)