首先在工具里引入Vue.j's
![](https://i-blog.csdnimg.cn/blog_migrate/dc82ecdcee03275a4f93dccbcecac38d.png)
接着在body里创建一个div并设置id,然后在给id起一个名字,我的是“app”。
在div里面再创建一个div,然后给它添加一个class命名为"content",后期的图片需要放在这个class为"content"的div里面。
![](https://i-blog.csdnimg.cn/blog_migrate/a263be7592c1012f32030a32d3cead8a.png)
在head里面添加style标签,在style标签里面为app ,content两个div设置布局
![](https://i-blog.csdnimg.cn/blog_migrate/40baf88afad288c3fde9166ce0abd76c.png)
在body的下面创建一个script,定义一个Vue方法并且绑定div为"app"的盒子
![](https://i-blog.csdnimg.cn/blog_migrate/18d2c0b8907eb0c0cf97bef488427580.png)
然后添加已给的组件,将父组件给子组件进行传值(传图片路径)
![](https://i-blog.csdnimg.cn/blog_migrate/63d42af2dbe1bef27086e2ff578811aa.png)
在class为"content"的div里面添加自己定义的"aa_img",并设置V-for循环(给图片传值)
![](https://i-blog.csdnimg.cn/blog_migrate/6b2573cf40e4a1ca96cc6a1347f94bfd.png)
最后在data里面导入数组,并填入所有的图片地址,点击运行
![](https://i-blog.csdnimg.cn/blog_migrate/a1dbea6c2ce22d3af09bc37f80d3ab63.png)
预览效果图
![](https://i-blog.csdnimg.cn/blog_migrate/d126616abc06ea85de9385159695ff3c.gif)