使用Vue自定义组件完成10×10图片表格的点击效果

已于 2023-03-21 15:45:27 修改
阅读量61 收藏
点赞数
文章标签： html5 Powered by 金山文档
于 2023-03-20 19:58:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a183794_/article/details/129674433
版权

一.效果展示

  1. 原始效果

  1. 依次点击前两排图片实现隐藏效果，再次点击恢复原始效果

二.代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="js/vue.js"></script><!--引入vue.js-->
    <style>
        .content {
            width: 630px;/* 盒子宽度要比照片宽度大 */
            border: 1px solid red;/* 设置边框 */
            margin: 0 auto;
            display: flex;/* 弹性布局 */
            flex-wrap: wrap;/* 换行 */
            justify-content: space-around;/* 对齐方式 */
        }
        
        img {
            width: 60px;
            height: 34px;
        }
        
        .item { /* 设置图片所在盒子的宽高和背景色 */
            width: 60px;
            height: 34px;
            background-color: #ccc;
            margin: 2px 0px;
        }
    </style>

    <body>
        <div id="app">
            <div class="content">
                           <!-- 这里使用了循环v-for和属性单向数据绑定v-bind -->
                <hhh-img v-for="i in imgs" v-bind:im="i"></hhh-img>
<!--v-for用来循环-->
            </div>
        </div>
        <!--组件模板-->
        <template id="testImg">
            <div class="item" @click="change"><!--为该盒子绑定了事件，click表示点击事件-->
                <img v-bind:src="im" v-show="show" /><!--v-bind绑定src值-->
                
            </div>
        </template>
        <script type="text/javascript">
            //创建组件
            Vue.component("hhh-img", {//hhh-img为组件名
                template: "#testImg",//与组件板块进行绑定
                props: ["im"],//接受父组件传来的数据
                data: function(){
                    return{
                        show: true
                    }
                },
                methods:{
                    change: function(){//单击盒子后change方法将show值取反，将图片隐藏
                        this.show = !this.show;
                    } 
                }
            })
            //创建Vue实例
            var vm = new Vue({
                el: "#app",//通过el与div元素绑定
                data: {
                    //定义数组储存图片路径
                    imgs: ["img/sj_01.jpg","img/sj_02.jpg",    "img/sj_03.jpg","img/sj_04.jpg","img/sj_05.jpg",
                    "img/sj_06.jpg","img/sj_07.jpg","img/sj_08.jpg","img/sj_09.jpg","img/sj_10.jpg",
                    "img/sj_11.jpg","img/sj_12.jpg","img/sj_13.jpg","img/sj_14.jpg","img/sj_15.jpg",
                    "img/sj_16.jpg","img/sj_17.jpg","img/sj_18.jpg","img/sj_19.jpg","img/sj_20.jpg",
                    "img/sj_21.jpg","img/sj_22.jpg","img/sj_23.jpg","img/sj_24.jpg","img/sj_25.jpg",
                    "img/sj_26.jpg","img/sj_27.jpg","img/sj_28.jpg","img/sj_29.jpg","img/sj_30.jpg",
                    "img/sj_31.jpg","img/sj_32.jpg","img/sj_33.jpg","img/sj_34.jpg","img/sj_35.jpg",
                    "img/sj_36.jpg","img/sj_37.jpg","img/sj_38.jpg","img/sj_39.jpg","img/sj_40.jpg",
                    "img/sj_41.jpg","img/sj_42.jpg","img/sj_43.jpg","img/sj_44.jpg","img/sj_45.jpg",
                    "img/sj_46.jpg","img/sj_47.jpg","img/sj_48.jpg","img/sj_49.jpg","img/sj_50.jpg",
                    "img/sj_51.jpg","img/sj_52.jpg","img/sj_53.jpg","img/sj_54.jpg","img/sj_55.jpg",    
                    "img/sj_56.jpg","img/sj_57.jpg","img/sj_58.jpg","img/sj_59.jpg","img/sj_60.jpg",
                    "img/sj_61.jpg","img/sj_62.jpg","img/sj_63.jpg","img/sj_64.jpg","img/sj_65.jpg",    
                    "img/sj_66.jpg","img/sj_67.jpg","img/sj_68.jpg","img/sj_69.jpg","img/sj_70.jpg",
                    "img/sj_71.jpg","img/sj_72.jpg","img/sj_73.jpg","img/sj_74.jpg","img/sj_75.jpg",
                    "img/sj_76.jpg","img/sj_77.jpg","img/sj_78.jpg","img/sj_79.jpg","img/sj_80.jpg",
                    "img/sj_81.jpg","img/sj_82.jpg","img/sj_83.jpg","img/sj_84.jpg","img/sj_85.jpg",
                    "img/sj_86.jpg","img/sj_87.jpg","img/sj_88.jpg","img/sj_89.jpg","img/sj_90.jpg",
                    "img/sj_91.jpg","img/sj_92.jpg","img/sj_93.jpg","img/sj_94.jpg","img/sj_95.jpg",
                    "img/sj_96.jpg","img/sj_97.jpg","img/sj_98.jpg","img/sj_99.jpg","img/sj_100.jpg",
]
                }
            })
        </script>
    </body>

</html>

三.附件链接

我用夸克网盘分享了「附件」，点击链接即可保存。打开「夸克APP」，无需下载在线播放视频，畅享原画5倍速，支持电视投屏。

链接：https://pan.quark.cn/s/209a33a36fde

提取码：m7Se

a183794_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 9113
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
使用vue等组件完成图片点击
qq_65771833的博客
03-21 1205
项目分成两个部分，一部分样式一部分内容。里面使用了组件，布局等。
Vue组件解析：自定义表格组件ByTable详解
weixin_48723799的博客
06-19 3357
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。
Vue及自定义组件完成10×10图片表格点击效果
D1823806469的博客
03-21 54
！！！！
使用 Vue 及自定义组件完成 10x10 图片表格的点击效果
m0_68007258的博客
03-17 263
使用 Vue 及自定义组件完成 10x10 图片表格的点击效果
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
08-29
在Vue.js框架中，封装自定义组件是提高代码复用性和项目可维护性的重要手段。本实例中，我们探讨的是一个名为“tabal列表编辑单元格”的组件，它允许用户在表格的单元格中进行编辑操作。下面将详细介绍这个组件的...
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
01-07
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道…，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。 官网：...
vue3 表格组件封装复用
02-27
我们可以创建自定义的逻辑函数，然后在多个组件中导入和使用，以实现表格的可编辑功能。 3. **表格组件设计**：首先，我们需要设计表格的基本结构，包括列定义、数据模型、操作列等。可以定义一个表格组件，接收...
a标签下载文件重命名（download）不生效
Julia_0502的博客
08-13 304
移动端使用a标签下载文件。
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
08-16
全球与中国再生涤纶纱市场现状及未来发展趋势（2024版）.docx
数据圣域的守护者：SQL第三范式的深度解析
08-16
SQL（Structured Query Language，结构化查询语言）是一种用于管理和操作关系数据库的标准编程语言。它被广泛用于创建、修改、查询和删除数据库中的数据。SQL的主要功能包括： 1. **查询**（Query）：从数据库中检索数据。 2. **插入**（Insert）：向数据库表中添加新的数据行。 3. **更新**（Update）：修改数据库表中的现有数据。 4. **删除**（Delete）：从数据库表中移除数据。 5. **创建**（Create）：创建新的数据库、表、视图等。 6. **修改**（Alter）：修改现有数据库结构，如添加或删除表的列。 7. **授权**（Grant）：为用户设置数据库权限。 8. **撤销**（Revoke）：移除用户的数据库权限。 SQL语言具有以下特点： - **声明性**：用户只需指定要检索或修改的数据，而不需要编写完成这些操作的步骤。 - **高度非过程化**：SQL允许用户以非过程化的方式操作数据，这意味着不需要编写复杂的算法。 - **易于学习和使用**：SQL语法直观，易于理解和编写。 - **跨平台**：
基于Matlab编程的汽车框定[Matlab编程].zip
最新发布
08-16
MATLAB提供了一些功能和工具，可以用于开发运动汽车跟踪系统。以下是一个简单的步骤示例，演示如何使用MATLAB实现一个基本的运动汽车跟踪系统。 步骤1：收集数据 首先，需要收集汽车的运动数据。可以使用传感器（如加速度计、陀螺仪）或车辆控制模块（如车载电脑）收集数据。收集的数据应包括汽车的位置、速度、加速度等信息。 步骤2：数据预处理 收集到的数据可能包含噪音和不完整的信息。因此，需要对数据进行预处理，以减少噪音并填充缺失的数据。预处理步骤可以包括滤波、插值等。 步骤3：运动分析 使用收集到的数据进行运动分析。根据汽车的位置、速度和加速度信息，可以计算汽车的运动特征，如加速度曲线、速度曲线等。 步骤4：跟踪算法 根据运动分析的结果，可以设计跟踪算法来跟踪汽车的运动。跟踪算法可以使用卡尔曼滤波器、粒子滤波器等。MATLAB提供了一些函数和工具箱，可以帮助实现这些滤波算法。 步骤5：显示和可视化 最后，使用MATLAB的图形界面和绘图功能，可以显示和可视化跟踪结果。可以使用MATLAB的图形函数绘制汽车的轨迹、速度曲线等。还可以使用MATLAB的GUI工具，创建一个交互式界面，
python 用GA算法优化BP神经网络，预测回归问题+源代码+文档说明
08-16
<项目介绍> - python 用GA算法优化BP神经网络，预测回归问题 神经网络部分： 网络结构三层：（3,2,1） 数据集： 实验的数据集为：advertise.txt （三个特征输入，一个输出） 其数据形式如下所示：（即求前三个数与最后一个数的关系） 一共有200条数据，训练集和测试集的比例为7:3 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于springboot的智慧养老监护平台 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的智慧养老监护平台是一个综合性的养老服务系统，旨在为老年人提供更加便捷、安全、舒适的生活环境。该平台分为用户前台和管理后台两个部分，以满足不同角色的需求。管理员可以通过管理后台对整个平台进行监控和管理，包括房间信息、房间入住、反馈信息、后勤人员和老人信息等模块。体检员和护工则可以通过用户前台进行日常工作，如查看老人健康信息、记录体检结果、提交反馈等。整个平台采用现代化的前端技术Vue.js和后端框架SpringBoot，保证了系统的稳定性和可扩展性，为用户提供了一个高效、易用、安全的养老服务环境。 录屏：https://www.bilibili.com/video/BV1Cb421b7xP 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
毕业设计，基于VB+ACCESS开发的企业生产管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文
08-16
毕业设计，基于VB+ACCESS开发的企业生产管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理，这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制，不仅提高了工作效率，而且大大的提高了其安全性。尤其对于复杂的信息管理，计算机能够充分发挥它的优越性。计算机进行信息管理与信息管理系统的开发密切相关，系统的开发是系统管理的前提。本系统就是用计算机操作企业生产管理系统，是企业单位用户更好的维护各项生产管理业务处理工作而开发的管理软件。 数据库管理系统（DBMS）是指数据库系统中管理数据的软件系统。DBMS是数据库系统的核心组成部分。对数据库的一切操作，包括定义、更新及各种控制,都是通过DBMS进行的。DBMS总是基于某种数据模型，可以把DBMS看成是某种数据模型在计算机系统上的具体实现。根据数据模型的不同，DBMS可以分成层次型、网状型、关系型、面向对象型等。Access就是一种关系型数据库管理系统。 根据需求分析，实现企业生产管理业务，效益已越来越明显。因此，
redis知识分享ppt
08-16
redis知识分享ppt
蒙特卡洛树搜索（MCTS）：人工智能决策的强力引擎
08-16
蒙特卡洛树搜索（Monte Carlo Tree Search，简称MCTS）是一种用于某些决策过程中的搜索算法，特别是在游戏理论、人工智能和优化领域中。它通过蒙特卡洛模拟来评估和选择最佳的移动策略。MCTS以其在计算资源有限的情况下，依然能够提供良好性能的特点而受到重视。本文将详细介绍MCTS的基本原理、关键组件、实现步骤以及在不同领域的应用案例。蒙特卡洛树搜索是一种强大的决策制定算法，它通过模拟可能的未来路径来评估当前的决策。MCTS的优势在于不需要对游戏或决策过程有深入的了解，且在有限的计算资源下仍能提供较好的性能。随着人工智能技术的不断发展，MCTS在游戏、机器人、网络优化等多个领域的应用前景广阔。未来，结合更高效的算法变体和先进的模拟技术，MCTS有望在更多复杂决策场景中发挥重要作用。
vue自定义组件表格
05-30
好的，下面是一个简单的示例代码，可以帮助你自定义一个表格组件： ```vue <template> <table> <thead> <tr> <th v-for="header in headers" :key="header">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index"> <td v-for="(item, key) in row" :key="key">{{ item }}</td> </tr> </tbody> </table> </template> <script> export default { props: { headers: { type: Array, required: true }, rows: { type: Array, required: true } } } </script> ``` 在这个组件中，我们使用了两个 props：headers 和 rows。headers 表示表格的表头，是一个字符串数组；rows 表示表格的数据行，是一个对象数组。在组件的模板中，我们使用了 v-for 指令来渲染表头和数据行。在表头中，我们使用了 v-for 和 :key 指令来循环渲染表头中的每一个单元格。在数据行中，我们使用了 v-for 和 :key 指令来循环渲染每一行中的每一个单元格。 你可以在父组件中使用这个组件来渲染一个自定义表格： ```vue <template> <div> <my-table :headers="headers" :rows="rows"></my-table> </div> </template> <script> import MyTable from './MyTable.vue' export default { components: { MyTable }, data () { return { headers: ['Name', 'Age', 'Gender'], rows: [ { name: 'Alice', age: 25, gender: 'Female' }, { name: 'Bob', age: 30, gender: 'Male' }, { name: 'Charlie', age: 20, gender: 'Male' } ] } } } </script> ``` 在这个父组件中，我们通过调用 MyTable 组件，并传入 headers 和 rows 两个 props 来渲染一个自定义表格。注意，父组件中的数据格式必须符合 MyTable 组件 props 的要求，即 headers 必须是一个字符串数组，rows 必须是一个对象数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值