Vue实现10*10图片的点击隐藏效果

HEDZY

已于 2023-03-20 21:07:44 修改

阅读量108

点赞数 1

文章标签： vue.js javascript 前端

于 2023-03-20 21:06:40 首次发布

本文链接：https://blog.csdn.net/HEDZY/article/details/129676274

版权

该代码示例展示了如何使用Vue.js创建一个自定义组件`dzy-img`，该组件遍历一组图片并在用户点击时切换图片的显示状态。通过数据属性`show`控制图片的可见性，并在点击事件`change`中反转`show`的状态，实现图片的隐藏和显示效果。

摘要由CSDN通过智能技术生成

1.图片点击前

在这里插入图片描述

2.点击后效果

在这里插入图片描述

3.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .content {
            width: 1760px;
            border: 1px solid red;
            margin: 0 auto;
            /* 弹性布局 */
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* 对齐方式(在主轴上的对齐方式 分散对齐) */
            justify-content: space-around;
        }

        .item {
            height: 81px;
            width: 170px;
            background-color: aqua;
            margin: 4px 0;
        }

        img {
            width: 170px;

        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <dzy-img v-for="i in imgs" v-bind:im="i"></dzy-img> <!-- 使用v-for循环遍历imgs中的图片，减少代码量，v-bind绑定im-->
        </div>
    </div>
    <!-- 定义一个template模板 -->
    <template id="testImg">
        <div class="item" @click="change"> <!-- 注册一个点击事件命名为change -->
            <img v-bind:src="im" v-show="show" /> <!-- v-bind绑定src，v-show切换元素的display-->
        </div>
    </template>
    <script>
        Vue.component("dzy-img", { //定义一个组件
            template: "#testImg",  //template与组件模板进行绑定
            props: ['im'], //props接收父组件中定义的数据
            data: function () {
                return {
                    show: true //show值为true，图片显示，false，图片隐藏
                }
            },
            methods: {
                change: function () {
                    this.show = !this.show; //点击图片时将show值取反，实现反复隐藏显示
                }
            }
        })
        var vm = new Vue({
            el: "#app", //指定容器，作用范围在id为app的盒子里面
            data: {  //用于存储数据，提供给el指定的容器使用
                imgs: ["img/wallhaven-k7mloq_01.jpg", "img/wallhaven-k7mloq_02.jpg", "img/wallhaven-k7mloq_03.jpg", "img/wallhaven-k7mloq_04.jpg", "img/wallhaven-k7mloq_05.jpg", "img/wallhaven-k7mloq_06.jpg", "img/wallhaven-k7mloq_07.jpg", "img/wallhaven-k7mloq_08.jpg", "img/wallhaven-k7mloq_09.jpg", "img/wallhaven-k7mloq_10.jpg", 
                	   "img/wallhaven-k7mloq_11.jpg", "img/wallhaven-k7mloq_12.jpg", "img/wallhaven-k7mloq_13.jpg", "img/wallhaven-k7mloq_14.jpg", "img/wallhaven-k7mloq_15.jpg", "img/wallhaven-k7mloq_16.jpg", "img/wallhaven-k7mloq_17.jpg", "img/wallhaven-k7mloq_18.jpg", "img/wallhaven-k7mloq_19.jpg", "img/wallhaven-k7mloq_20.jpg", 
               		   "img/wallhaven-k7mloq_21.jpg", "img/wallhaven-k7mloq_22.jpg", "img/wallhaven-k7mloq_23.jpg", "img/wallhaven-k7mloq_24.jpg", "img/wallhaven-k7mloq_25.jpg", "img/wallhaven-k7mloq_26.jpg", "img/wallhaven-k7mloq_27.jpg", "img/wallhaven-k7mloq_28.jpg", "img/wallhaven-k7mloq_29.jpg", "img/wallhaven-k7mloq_30.jpg",
                       "img/wallhaven-k7mloq_31.jpg", "img/wallhaven-k7mloq_32.jpg", "img/wallhaven-k7mloq_33.jpg", "img/wallhaven-k7mloq_34.jpg", "img/wallhaven-k7mloq_35.jpg", "img/wallhaven-k7mloq_36.jpg", "img/wallhaven-k7mloq_37.jpg", "img/wallhaven-k7mloq_38.jpg", "img/wallhaven-k7mloq_39.jpg", "img/wallhaven-k7mloq_40.jpg", 
                       "img/wallhaven-k7mloq_41.jpg", "img/wallhaven-k7mloq_42.jpg", "img/wallhaven-k7mloq_43.jpg", "img/wallhaven-k7mloq_44.jpg", "img/wallhaven-k7mloq_45.jpg", "img/wallhaven-k7mloq_46.jpg", "img/wallhaven-k7mloq_47.jpg", "img/wallhaven-k7mloq_48.jpg", "img/wallhaven-k7mloq_49.jpg", "img/wallhaven-k7mloq_50.jpg",
                       "img/wallhaven-k7mloq_51.jpg", "img/wallhaven-k7mloq_52.jpg", "img/wallhaven-k7mloq_53.jpg", "img/wallhaven-k7mloq_54.jpg", "img/wallhaven-k7mloq_55.jpg", "img/wallhaven-k7mloq_56.jpg", "img/wallhaven-k7mloq_57.jpg", "img/wallhaven-k7mloq_58.jpg", "img/wallhaven-k7mloq_59.jpg", "img/wallhaven-k7mloq_60.jpg", 
                       "img/wallhaven-k7mloq_61.jpg", "img/wallhaven-k7mloq_62.jpg", "img/wallhaven-k7mloq_63.jpg", "img/wallhaven-k7mloq_64.jpg", "img/wallhaven-k7mloq_65.jpg", "img/wallhaven-k7mloq_66.jpg", "img/wallhaven-k7mloq_67.jpg", "img/wallhaven-k7mloq_68.jpg", "img/wallhaven-k7mloq_69.jpg", "img/wallhaven-k7mloq_70.jpg",
                       "img/wallhaven-k7mloq_71.jpg", "img/wallhaven-k7mloq_72.jpg", "img/wallhaven-k7mloq_73.jpg", "img/wallhaven-k7mloq_74.jpg", "img/wallhaven-k7mloq_75.jpg", "img/wallhaven-k7mloq_76.jpg", "img/wallhaven-k7mloq_77.jpg", "img/wallhaven-k7mloq_78.jpg", "img/wallhaven-k7mloq_79.jpg", "img/wallhaven-k7mloq_80.jpg",
                       "img/wallhaven-k7mloq_81.jpg", "img/wallhaven-k7mloq_82.jpg", "img/wallhaven-k7mloq_83.jpg", "img/wallhaven-k7mloq_84.jpg", "img/wallhaven-k7mloq_85.jpg", "img/wallhaven-k7mloq_86.jpg", "img/wallhaven-k7mloq_87.jpg", "img/wallhaven-k7mloq_88.jpg", "img/wallhaven-k7mloq_89.jpg", "img/wallhaven-k7mloq_90.jpg", 
                       "img/wallhaven-k7mloq_91.jpg", "img/wallhaven-k7mloq_92.jpg", "img/wallhaven-k7mloq_93.jpg", "img/wallhaven-k7mloq_94.jpg", "img/wallhaven-k7mloq_95.jpg", "img/wallhaven-k7mloq_96.jpg", "img/wallhaven-k7mloq_97.jpg", "img/wallhaven-k7mloq_98.jpg", "img/wallhaven-k7mloq_99.jpg", "img/wallhaven-k7mloq_100.jpg",
                ]
            }
        })
    </script>
</body>

</html>