vue实现图片隐藏

页面效果：单击图片时图片隐藏显示背景，再次点击重新显示图片。

 

实现流程：

第一步：创建web项目，导入vue.js

 

第二步：实例化vue对象，在页面中引入<script>标签，并在<script>标签中实例化vue对象。通过el将对象需要挂载的值进行绑定。

 

第三步：创建组件，给图片添加v-show的值，控制图片是否显示，利用css样式设置图片背景，点击图片时，隐藏img显示盒子背景图。通过@click控制show和v-show属性，将@click给盛放的盒子，用盒子进行占位来实现再次点击图片重新显示效果。

Css部分的样式：

 

优化代码：创建一个·数组，添加v-for属性，用for循环遍历数组中的元素，通过v-bind变量im动态绑定img，接收遍历v-for循环遍历数组中的每一个元素，通过props声明使用父组件的数据。

 

*注：图片用ps的划分工具切割，图片名字利用excel表格拉取：

 

 

 

 

 

 

完整代码展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js"></script> 
        <style>
            #app{
                width: 1300px;
                height: 1300px;
                justify-content: space-around;
                display: flex;
                flex-wrap: wrap;
            }
            .item{
                width: 128px;
                height: 128px;
                background-color: pink;
            }
        </style>
        <noscript></noscript>
    </head>
    <body>
        <div id="app">
            <!-- 动态绑定im=img -->
            <long v-for = "img in arrayimg" v-bind:im="img"></long>
        </div>
    </body>
    <template id="around">
        <div class="item" @click="change">
            <img :src="im" v-show="show" />
            <!-- 解析字符串 -->
        </div>
    </template>

    <script type="text/javascript">
        Vue.component("long",{
            template:"#around",
            // 连接组件
            props:["im"],
            // 声明要使用父组件的数据
            data:function(){
                return{
                    // 让每个组件的内容互不影响
                    show:true,
                }
            },
            methods:{
                change:function(){
                    this.show = !this.show
                    // 取反
                }
            }
        });
        var vm = new Vue({
            el:"#app",
            // /作用范围
            data:{
                arrayimg:["img/a (1).png","img/a (2).png",    "img/a (3).png",    "img/a (4).png",    "img/a (5).png",    "img/a (6).png",    "img/a (7).png",    "img/a (8).png",    "img/a (9).png",    "img/a (10).png",    "img/a (11).png",    "img/a (12).png",    "img/a (13).png",    "img/a (14).png",    "img/a (15).png",    "img/a (16).png",    "img/a (17).png",    "img/a (18).png",    "img/a (19).png",    "img/a (20).png",    "img/a (21).png",    "img/a (22).png",    "img/a (23).png",    "img/a (24).png",    "img/a (25).png",    "img/a (26).png",    "img/a (27).png",    "img/a (28).png",    "img/a (29).png",    "img/a (30).png",    "img/a (31).png",    "img/a (32).png",    "img/a (33).png",    "img/a (34).png",    "img/a (35).png",    "img/a (36).png",    "img/a (37).png",    "img/a (38).png",    "img/a (39).png",    "img/a (40).png",    "img/a (41).png",    "img/a (42).png",    "img/a (43).png",    "img/a (44).png",    "img/a (45).png",    "img/a (46).png",    "img/a (47).png",    "img/a (48).png",    "img/a (49).png",    "img/a (50).png",    "img/a (51).png",    "img/a (52).png",    "img/a (53).png",    "img/a (54).png",    "img/a (55).png",    "img/a (56).png",    "img/a (57).png",    "img/a (58).png",    "img/a (59).png",    "img/a (60).png",    "img/a (61).png",    "img/a (62).png",    "img/a (63).png",    "img/a (64).png",    "img/a (65).png",    "img/a (66).png",    "img/a (67).png",    "img/a (68).png",    "img/a (69).png",    "img/a (70).png",    "img/a (71).png",    "img/a (72).png",    "img/a (73).png",    "img/a (74).png",    "img/a (75).png",    "img/a (76).png",    "img/a (77).png",    "img/a (78).png",    "img/a (79).png",    "img/a (80).png",    "img/a (81).png",    "img/a (82).png",    "img/a (83).png",    "img/a (84).png",    "img/a (85).png",    "img/a (86).png",    "img/a (87).png",    "img/a (88).png",    "img/a (89).png",    "img/a (90).png",    "img/a (91).png",    "img/a (92).png",    "img/a (93).png",    "img/a (94).png",    "img/a (95).png",    "img/a (96).png",    "img/a (97).png",    "img/a (98).png",    "img/a (99).png",    "img/a (100).png"
                ]
            }
        });
    </script>
</html>

 

 

附件链接：https://pan.baidu.com/s/1FkIyFAHD2QnVqd85Y5atGg?pwd=zyh3

提取码：zyh3

--来自百度网盘超级会员V2的分享

posted @ 2023-03-19 22:25  小张讨厌数学  阅读(566)  评论(0)    收藏  举报