【Vue小项目】基于Vue的10×10图片表格的点击效果

最新推荐文章于 2024-05-15 11:55:14 发布

末年649

最新推荐文章于 2024-05-15 11:55:14 发布

阅读量169

点赞数 3

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_64313784/article/details/129687413

版权

一、项目分享

第一步：10×10图片表格布局

第二步：图片处理（把图片分成100份）

第三步：功能实现（使用组件循环导入图片，实现点击图片隐藏和显现）

二、实战步骤

编写基本布局

（1）首先引入vue包，然后写一个带id的盒子，因为考虑到要用到组件因此在带id的盒子中加入一个带class的盒子来显示图片

（2）写css效果，加一个背景颜色便于观察，使用弹性布局来对图片进行排版

<style>
            body{
                background-color: red;
            }
            .content{
                border: 1px solid red;
                width: 1800px;
                margin: 0 auto;
                /* 弹性布局 */
                display: flex;
                /* 换行 */
                flex-wrap: wrap;
                /* 在主轴上的对齐方式为x轴 */
                justify-content: space-around;
            }
            .item{
                width: 170px;
                height: 130px;
                margin: 5px 0px;
                background-color: aqua;
            }
            img{
                width: 170px;
                height: 130px;
            }
        </style>
        <!-- 引入vue包 -->
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="content">
                    <!-- 组件的使用 -->
                    <ding-img v-for="a in imgs" :im="a"></d-img>
            </div>
        </div>
    </body>