Vue的10×10的图片点击效果图

一、项目分享

第一步：10×10图片表格布局

第二部：图片处理(使用ps切图，工具栏切换为切片工具，图片上右键点击切片划分，水平划分为10，垂直划分为10，点击确定，点击右上角文件，存储为web所用的格式，并将图片位置放置项目里的images文件夹下)

第三步：功能实现（使用组件循环导入图片，实现点击图片时的隐藏和显现)

二、

（1）首先引入vue包，然后写一个带id的盒子，因为考虑到要用到组件因此在带id的盒子中加入一个带class的盒子来显示图片（首先就要明白10*10图片表格靠一个一个摆盒子是繁琐的，这里就用到了vue里面的v-for循环语句

（2）写css效果，最后把浏览器页面颜色设置为红色，来凸显图片，使用弹性布局来对图片进行排版

 

2.用ps切片工具处理图片（把照片同等分为100份）

 

3.定义组件以及组件的使用与获取动态数据

（1）定义组件

使用Vue.component()方法用于全局注册组件

使用props:["im"]用来接受父组件中定义的数据

 

（2）组件的使用以及动态数据的获取（使用v-for循环获取data中的数据，并放入a中）

 

2.实现点击效果

在.item盒子中加入@click点击事件