Vue实现图片点击隐藏效果

前言：组件作为Vue.js最强大的功能之一，因其封装可复用的代码方便程序员调用和可根据需求对组件进行个性化开发而深受广大前端程序员的喜爱。组件化的开发大大提升了代码的复用性，提升了项目开发效率，本文主要制作一个简易的小组件用来实现图片的点击翻转效果。

实现效果：

 

界面效果分析：

1.基本框架，搭建盒子盛放界面

2. 点击事件，点击图片浏览器交互产生翻转效果

3. 图片翻转，点击图片消隐藏再次点击图片出现

实现流程：

一   创建一个web项目，本地导入vue.js

    创建一个包含HTML基本项目的Web项目，在js文件下下导入本地的Vue.js文件，通过<script src="js/vue.js"></script> 将Vue.js文件引入到我们的Web项目中。

二  实例化Vue对象 ,挂载Vue所绑定的DOM节点

    在界面中通过引入<script>标签，并在<script>标签中实例化Vue对象。实例化对象后通过el属性将我们对象所需要挂载DOM节点的id值进行绑定。注：先创建DOM节点然后进行绑定。

三  实现效果分析

1.点击事件判断，给图片添加v-show属性通过@clike取反操作改变v-show的值来控制图片的展示与隐藏。v-show值默认设置为true即图片展示，当v-show属性值为false时将隐藏img节点展示背景图，由于v-show值为flase时，将隐藏我们的img节点使我们无法进行再次点击进行值转换展示图片，因此要将@clike给盛放img的盒子，通过盒子进行占位来实现点击翻转效果。

2. 图片放置分析。给图片添加v-show属性通过属性值变换用来控制图片是否显示，给盒子添加背景实现图片的隐藏效果，当我们点击时隐藏img展现为盒子的背景图片再次点击展现图片。

四  创建组件

 

五 组件中存在的不足之处及改进思路

1.在template中图片的路径问题。img路径为固定值，当我们再次调用组件时不能进行值传递，代码的复用性太差。

2. 组件使用时。因为路径固定不能进行值传递当面对图片较多时需要重复调用组件，代码冗余。

改进思路：

1.创建一个数组用来存放图片路径，当图片较多时在数组中添加图片路径即可

2.增添v-for属性，用for循环遍历数组中的元素即可确定创建组件个数

3.增添v-bind属性接收传递的值，v-for 循环遍历创建数组中的每一个元素然后将获取到的值传递给v-bind属性

4.给src添加动态绑定属性，v-bind所获取到的值通过动态绑定将拿到的每一项的 src 值绑定给 img 标签的 src 上

具体实施

代码难点（值传递）

  在组件中我们声明props来接收传递的数据，for循环获取到的每一个数据通过v-bine动态绑定给声明的props，当props接收到数据以后及时更新组件模板完成渲染。

多学一点：

1.图片分割：图片分割时我们可以采用ps切片工具来制作任意等分的小图片。

2.数据填充：面对向数组中添加同一类型不同值的数据时，我们可以借助Excel函数来完成，并通过记事本查找和替换功能来得到我们想要的数据。

六 完整代码展示

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/vue.js"></script>
 7         <style>
 8             #app {
 9                 display: flex;
10                 flex-wrap: wrap;
11                 justify-content: space-around;
12                 width: 1010px;
13                 height: 610px;
14                 margin: 0 auto;
15             }
16 
17             .item {
18                 width: 100px;
19                 height: 60px;
20                 background-color: #ccc;
21             }
22 
23             img {
24                 width: 100px;
25                 height: 60px;
26             }
27         </style>
28         <noscript></noscript>
29     </head>
30     <body>
31         <div id="app">
32             <long v-for="img in arrayimg" v-bind:im="img"></long>
33 
34         </div>
35 
36     </body>
37 
38     <template id="around">
39         <div class="item" @click="change">
40             <img :src="im" v-show="show" />
41         </div>
42 
43 
44     </template>
45 
46     <script type="text/javascript">
47         Vue.component("long", {
48             template: "#around",
49             props: ["im"],
50             data: function() {
51                 return {
52                     show: true,
53 
54                 }
55             },
56             methods: {
57                 change: function() {
58                     this.show = !this.show
59                 }
60             }
61 
62         });
63 
64         var vm = new Vue({
65             el: "#app",
66             data: {
67                 arrayimg: ["img/1 (1).gif", "img/1 (2).gif", "img/1 (3).gif", "img/1 (4).gif", "img/1 (5).gif",
68                     "img/1 (6).gif", "img/1 (7).gif", "img/1 (8).gif", "img/1 (9).gif", "img/1 (10).gif",
69                     "img/1 (11).gif", "img/1 (12).gif", "img/1 (13).gif", "img/1 (14).gif", "img/1 (15).gif",
70                     "img/1 (16).gif", "img/1 (17).gif", "img/1 (18).gif", "img/1 (19).gif", "img/1 (20).gif",
71                     "img/1 (21).gif", "img/1 (22).gif", "img/1 (23).gif", "img/1 (24).gif", "img/1 (25).gif",
72                     "img/1 (26).gif", "img/1 (27).gif", "img/1 (28).gif", "img/1 (29).gif", "img/1 (30).gif",
73                     "img/1 (31).gif", "img/1 (32).gif", "img/1 (33).gif", "img/1 (34).gif", "img/1 (35).gif",
74                     "img/1 (36).gif", "img/1 (37).gif", "img/1 (38).gif", "img/1 (39).gif", "img/1 (40).gif",
75                     "img/1 (41).gif", "img/1 (42).gif", "img/1 (43).gif", "img/1 (44).gif", "img/1 (45).gif",
76                     "img/1 (46).gif", "img/1 (47).gif", "img/1 (48).gif", "img/1 (49).gif", "img/1 (50).gif",
77                     "img/1 (51).gif", "img/1 (52).gif", "img/1 (53).gif", "img/1 (54).gif", "img/1 (55).gif",
78                     "img/1 (56).gif", "img/1 (57).gif", "img/1 (58).gif", "img/1 (59).gif", "img/1 (60).gif",
79                     "img/1 (61).gif", "img/1 (62).gif", "img/1 (63).gif", "img/1 (64).gif", "img/1 (65).gif",
80                     "img/1 (66).gif", "img/1 (67).gif", "img/1 (68).gif", "img/1 (69).gif", "img/1 (70).gif",
81                     "img/1 (71).gif", "img/1 (72).gif", "img/1 (73).gif", "img/1 (74).gif", "img/1 (75).gif",
82                     "img/1 (76).gif", "img/1 (77).gif", "img/1 (78).gif", "img/1 (79).gif", "img/1 (80).gif",
83                     "img/1 (81).gif", "img/1 (82).gif", "img/1 (83).gif", "img/1 (84).gif", "img/1 (85).gif",
84                     "img/1 (86).gif", "img/1 (87).gif", "img/1 (88).gif", "img/1 (89).gif", "img/1 (90).gif",
85                     "img/1 (91).gif", "img/1 (92).gif", "img/1 (93).gif", "img/1 (94).gif", "img/1 (95).gif",
86                     "img/1 (96).gif", "img/1 (97).gif", "img/1 (98).gif", "img/1 (99).gif", "img/1 (100).gif"
87                 ]
88             }
89         });
90     </script>

附件链接：

链接：https://pan.baidu.com/s/1IUZ7Jl5WfNDdrlizsSZ5UA?pwd=sds3 
提取码：sds3

——来自百度云分享

 

 

 

 

 

 

 

 

 

 

 

 

    

 

posted @ 2023-03-18 20:24  QAQ000aaa  阅读(182)  评论(0)    收藏  举报