【使用Vue和自定义组件完成10*10的图片点击效果】

最新推荐文章于 2024-06-28 18:39:53 发布
最新推荐文章于 2024-06-28 18:39:53 发布
阅读量55 收藏
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77166792/article/details/129701104
版权

运行效果

步骤：先用ps切割图片，导入图片数据到img文件，导入并连接vue.js，
1.将图片用ps分割成10*10的切割图片
2.导入并连接vue.js文件，将图片导入img文件。写一个div并为他设置ID和class

导入js

 写一个div

 3.为div设置样式和使用弹性布局布局

 4.给每一个图片所放置的div设置一个@click事件和v-show指令来实现图片点击后隐藏和显示的效果

5.写点击显示隐藏效果

 6.用v-for指令将父组件中imgs属性中的图片数据遍历并传送给子组件im，然后子组件用props属性来接收

 这样代码就完成啦

hikkklb
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
使用Vue自定义数字键盘组件(体验度极好)
08-28
"使用Vue自定义数字键盘组件，提高用户体验" 在 Vue 开发中，输入金额是一种常见的交互场景。然而，用原生的 input 进行金额输入体验很不好。为了提高用户体验，小编使用 Vue 自定义了数字键盘组件。本文将详细介绍...
Vue 自定义组件
qq_41775769的博客
03-13 2万+
Vue 自定义组件与使用 1. 初识组件   组件：如果项目中多次用到类似的效果，就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件，组件必须导入之后才能使用，其中 HelloWorld 为自定义名称，通过这个名称就可以调用对应组件。   components：组件文件只导入是不能被调用的，还必须在 components 中注册组件，注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式
vue3自定义组件
weixin_45099012的博客
08-01 3313
vue3自定义组件
vue自定义组件中再嵌套其他组件
左直拳的马桶_日用桶
03-12 5690
其实就是在容器组件里放一个插槽（slot)。 VUE的看点是组件。组件应用的典型例子，是一个网站首页。分为若干版块。每个版块都是一个方框框，样式一致，只是版块中间内容不同。对于VUE来说，很自然的想法，就是方框是一个组件，然后里面嵌套个性化内容，或者每个版块索性也做一个组件。这样就提出了题目描述的需求：如何实现自定义组件中再嵌套其他组件。俄罗斯套娃。 实现起来十分简单。就是在方框组件（即容器组件）中放置一个插槽（slot)。 1、容器组件（Block.vue) <template> &lt
vue3笔记：自定义组件
weixin_45921387的博客
03-04 5754
defineProps()，IProps可以给props设置类型，withDefaults的第二个参数支持给props设置默认值
Vue进阶（九十四）：自定义组件
IT全栈 华强工作室
01-20 6069
做前端项目开发，自定义组件是必不可少的一项基本技能，前端应用框架（像Vue、React、Angular）都提供一些已封装好、可复用的组件。但在实际项目开发过程中，根据具体的项目开发特点，肯定会遇到一些定制化的开发需求，此时，框架提供的通用组件就不再满足我们的需求了，就需要自己完成可复用组件的编码。 实现自定义组件编码的基本思路如下： 思考这个组件需要实现什么效果； 建立组件的模板，先把架子搭起来...
Vue|怎么自定义组件？
文化园
06-30 2127
初学vue已近3个周，至此开发技能已满足。从eggjs 到 vue 再到 scss，这个过程需要总结和分享。深度学习需要从这里点点滴滴的开始 ~ 以上截图是，刚为内容分享使用vue所画的页面。看效果，与原图相比逼真度——真假难分 接下来总结方向，vue中如何自定义组件？如何使用自定义组件？ ...
vue-自定义组件传值
热门推荐
李刚的学习专栏
12-23 2万+
​ 项目中，我们经常会遇到自定义组件传值的问题，方法很多种，但是原理很简单，下述文档总结实际项目中使用的传值方式。 父组件传递给子组件某一值，子组件内会修改该值，然后父组件需要获取新值 ​ 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop给子组件下发数据，子组件通过事件给父组件发送消息。常规prop-event父组件<prop-event-
vuepress自定义vue组件
yantao19930905的博客
09-16 1470
本文讲述如何在 vuepress 站点中自定义 vue 组件。我们可以在 md 文档中插入自定义组件，来实现各种页面效果。关于如何定义 vue 组件，请查阅 vuejs 官方文档。
vue 自定义组件实现 v-model
zc763375777的博客
09-06 1979
data() {
vue自定义组件（超详细）
前端学习笔记
12-23 2万+
#vue自定义组件的使用方法
Vue的自定义组件不能使用click方法的解决
10-15
总结来说，Vue自定义组件中点击事件的处理需要注意使用`.native`修饰符，以便正确监听和处理根元素的原生事件。同时，利用`<component>`元素和`:is`属性可以方便地实现在视图中动态切换组件，为复杂应用提供灵活的...
vue2.0 自定义组件的方法（vue组件的封装）
08-27
在 Vue 2.0 中，自定义组件是非常强大的功能之一，它允许开发者根据自己的需求封装自己的组件，从而提高开发效率和代码重用性。在本文中，我们将详细介绍 Vue 2.0 自定义组件的方法，并通过实例代码来演示如何实现...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
Vue-Ci搭建项目
2301_78875117的博客
06-26 449
npm 是Node.js的包管理工具,用来安装各种 Node.js的扩展。vue-cli 官方提供的一个脚手架,用于快速生成一个vue的项目模板;JavaScript 的包管理工具,也是世界上最大的软件注册表。简单的说 Node.js是一个前端js运行环境或者说是一个JS语言解释器。好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个。骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;创建 index.js 文件,在其中配置路由。其他开发人员共享的代码。
深入理解 Vue.js 中的 deep: true
weixin_42279822的博客
06-26 707
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue3插槽的使用
最新发布
qq_47040462的博客
06-28 295
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
Vue下载接口返回流的处理
qq_42753983的博客
06-25 267
2.可以写公共方法处理。3-2 不需要带日期。
vue3自定义组件使用
08-26
Vue 3 的自定义组件使用很简单。下面是一个简单的示例： 首先，在你的 Vue 项目中创建一个自定义组件的文件，例如 `MyComponent.vue`。 然后，在该文件中，你需要定义一个 Vue 组件。可以使用 `<template>` 标签来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值