图片表格点击效果-CSDN博客

本文链接：https://blog.csdn.net/2301_77117943/article/details/129656976

使用vue及自定义组件完成10*10图片表格的点击效果步骤如下：

使用ps切片工具将图片切成10*10，然后导出图片，把图片导入到img

导入vue，然后定义一个新的vue

3.新建组件和注册组件

4.然后利用v-for循环图片和用v-bind动态绑定属性

5.设置样式

最后实现点击效果，当点击图片时图片会被隐藏，再次点击时图片会显示

最终代码

<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .content {
                width: 750px;
                margin: 0 auto;
                border: 1px solid skyblue;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .item {
                height: 66px;
                width: 69px;
                background-color: #ccc;
                margin: 3px 0px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="content">
                <lt v-for="img in imgs" v-bind:im="img"></lt>
            </div>
        </div>
    </body>
    <template id="area">
        <div class="item" @click="change">
            <img v-bind:src="im" v-show="show" />
        </div>

    </template>
    <script>
        //新建组件、、注册组件
        Vue.component("lt", {
            template: "#area",
            props: ["im"],
            data: function() {
                return {
                    show: true,
                    imgSrc: ""
                }
            },
            methods: {
                change: function() {
                    this.show = !this.show;
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                imgs: ["img/img_01.jpg", "img/img_02.jpg", "img/img_03.jpg", "img/img_04.jpg", "img/img_05.jpg",
                    "img/img_06.jpg", "img/img_07.jpg", "img/img_08.jpg", "img/img_09.jpg", "img/img_10.jpg",
                    "img/img_11.jpg", "img/img_12.jpg", "img/img_13.jpg", "img/img_14.jpg", "img/img_15.jpg",
                    "img/img_16.jpg", "img/img_17.jpg", "img/img_18.jpg", "img/img_19.jpg", "img/img_20.jpg",
                    "img/img_21.jpg", "img/img_22.jpg", "img/img_23.jpg", "img/img_24.jpg", "img/img_25.jpg",
                    "img/img_26.jpg", "img/img_27.jpg", "img/img_28.jpg", "img/img_29.jpg", "img/img_30.jpg",
                    "img/img_31.jpg", "img/img_32.jpg", "img/img_33.jpg", "img/img_34.jpg", "img/img_35.jpg",
                    "img/img_36.jpg", "img/img_37.jpg", "img/img_38.jpg", "img/img_39.jpg", "img/img_40.jpg",
                    "img/img_41.jpg", "img/img_42.jpg", "img/img_43.jpg", "img/img_44.jpg", "img/img_45.jpg",
                    "img/img_46.jpg", "img/img_47.jpg", "img/img_48.jpg", "img/img_49.jpg", "img/img_50.jpg",
                    "img/img_51.jpg", "img/img_52.jpg", "img/img_53.jpg", "img/img_54.jpg", "img/img_55.jpg",
                    "img/img_56.jpg", "img/img_57.jpg", "img/img_58.jpg", "img/img_59.jpg", "img/img_60.jpg",
                    "img/img_61.jpg", "img/img_62.jpg", "img/img_63.jpg", "img/img_64.jpg", "img/img_65.jpg",
                    "img/img_66.jpg", "img/img_67.jpg", "img/img_68.jpg", "img/img_69.jpg", "img/img_70.jpg",
                    "img/img_71.jpg", "img/img_72.jpg", "img/img_73.jpg", "img/img_74.jpg", "img/img_75.jpg",
                    "img/img_76.jpg", "img/img_77.jpg", "img/img_78.jpg", "img/img_79.jpg", "img/img_80.jpg",
                    "img/img_81.jpg", "img/img_82.jpg", "img/img_83.jpg", "img/img_84.jpg", "img/img_85.jpg",
                    "img/img_86.jpg", "img/img_87.jpg", "img/img_88.jpg", "img/img_89.jpg", "img/img_90.jpg",
                    "img/img_91.jpg", "img/img_92.jpg", "img/img_93.jpg", "img/img_94.jpg", "img/img_95.jpg",
                    "img/img_96.jpg", "img/img_97.jpg", "img/img_98.jpg", "img/img_99.jpg", "img/img_100.jpg",
                ]
            }
        });
    </script>
</html>