第一步:创建一个web项目,本地导入vue.js
第二步:实例化vue对象
第三步:利用photoshop将图片分割成10*10,导入img文件夹下,并在vue的data属性下创建一个图片路径的数组,效果如下:
ps:名字可以利用excel和记事本的替换功能完成,此处不再赘述。
第四步:创建组件,并在组件中写下点击图片事件的方法:
具体思路如下:1.在组件中插入图片,设计一个变量show和v-show来控制图片是否显示,
2.再用div包裹这个图片,用css设置这个块的背景颜色。
3.设计一个方法change用来改变变量show,用@click来调用这个方法 ps:此处的@click不能写在图片标签上,不然无法完成色块到图片的转化。
以下为第一个图片的示例:
发现数组内容写错了(已改正)
此处附上css
第五步:优化代码
背景:一百个图片一个一个做组件插入过于繁琐,应寻找一种更为便捷的方法。
思路:1. 利用v-for将标签循环插入
2.v-for的语句为A in B ,此处我们可以定义A变量为imn,B为我们上边做的图片名字的数组名pic
3.要在子组件中用到父组件中的数据,需要用props来声明,所以有 :
4.用v-bind 变量innna绑定imn(在父组件中的props中声明过)来接收innna遍历pic数组中的值。此时每一次的遍历都会让innna的值为图片的路径,然后需要将innna传入到组件的图片src中。
注:src
后面的字符串当做变量解析使用
常规写法,就是当字符串使用
代码如下:
最终效果实现
标签:分割,变量,show,点击,innna,组件,100,图片 From: https://www.cnblogs.com/yhyh296/p/17227365.html