利用vue实现点击图片后隐藏图片

最新推荐文章于 2023-03-21 22:27:55 发布
最新推荐文章于 2023-03-21 22:27:55 发布
阅读量382 收藏
点赞数
文章标签： vue.js vue Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64980585/article/details/129699002
版权
本文介绍了如何使用Vue.js创建一个组件，实现点击图片后图片隐藏的功能。通过定义data对象和Vue组件，结合CSS样式，达到了点击图片显示和隐藏的交互效果。
摘要由CSDN通过智能技术生成

第一步：建立一个div，用来确定整体的外形，将图片放进去。

第二步：定义一个data对象，用于存储图片数据，以便于v-for指令的调用。

第三步：定义一个Vue组件，实现点击图片可以显示和隐藏的效果。

第四步：用style标签美化一下，使图片展示效果更加准确和美观。

代码如下

最低0.47元/天 解锁文章
小刘想要飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue实现图片的显示和隐藏
m0_69775127的博客
03-20 875
v-if和v-show：v-if用来控制元素显示和隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创造，所以v-if在性能上不如v-show。v-show会取v-show的反向指令，出现隐藏效果）组件：在vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。v-for：可以实现页面列表渲染，常用来循环数组。
vue2 element点击其他地方关闭图片
最新发布
qq_44023710的博客
05-09 427
【代码】vue2 element点击其他地方关闭图片。
vue2.0 点击其他区域关闭自定义div
热门推荐
xingyu_qie的专栏
12-18 4万+
vue2.0点击其他区域关闭当前弹出
vue.js--v-show隐藏图片
qq_57218752的博客
03-21 2578
vue.js–隐藏图片 本次代码利用了vue里面的 v-show指令来进行的，此命令是根据表达式的值来判断是否显示或者隐藏dom元素的 当表达式值为true是元素显示，为false时元素隐藏。此命令与 v-if不同使用此命令无论表达式的值为true还是false，该元素都始终会被渲染并保留在dom中绑定值的改变只是简单的切换css属性display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
vue隐藏图片
2201_75322765的博客
03-20 134
【代码】vue隐藏图片。
使用vue编写图片点击隐藏(显示)功能
derest123的博客
03-21 776
【代码】使用vue编写图片点击隐藏(显示)功能。
vue实现简易图片左右旋转,上一张,下一张组件案例
10-15
以下是如何使用Vue实现这个组件的详细步骤和关键知识点： 首先，我们从父组件代码开始。在父组件中，我们引入了名为`seeAttachment`的子组件，并通过`props`传递数据。`filesLists`用于存储图片列表，`file`则用来...
基于vue.js实现图片轮播效果
10-20
在开发一个基于Vue.js框架的图片轮播组件时，涉及到的技术点相当广泛，包括组件的创建、数据绑定、...在学习和实践Vue.js开发的过程中，可以利用Vue.js社区提供的各种插件和组件库来帮助我们更加高效地开发轮播组件。
vue实现图片上传预览功能
10-15
总结来说，Vue实现图片上传预览功能需要结合前端框架的特点，利用Vue的数据绑定指令、事件监听、组件封装以及CSS样式设计等多种手段来完成。开发人员需要根据项目需求来灵活设计交互逻辑和界面表现，以达到良好的...
vue实现动画，点击实现隐藏显示
04-11
vue动画，点击实现显示隐藏。
Vue.js 点击按钮显示/隐藏内容
06-21
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
10-17
在Vue.js项目中实现Markdown编辑器，并增加图片上传功能，需要使用到SimpleMDE编辑器。SimpleMDE是一个简单易用的Markdown编辑器，它是基于CodeMirror开发的，适用于那些希望提供给用户富文本编辑功能，但又不想放弃...
vue 点击关闭按钮就可以关闭图片，可以用到广告关闭组件。
yhd1998的博客
10-12 786
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <style type="text...
Vue图片显示隐藏小demo
nyasm的博客
02-05 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &lt
#vue# mousedown、mouseup事件，JS实现密码框小眼睛显示与隐藏
ZHENGCHUNJUN的博客
07-23 2386
需求： 密码框右侧小眼睛， 鼠标按下鼠标按键（左、右键均可）就显示出密码， 鼠标松开鼠标按键（左、右键均可）密码就隐藏 思路： （1）首先就是排版了（不细讲） 提供右侧小眼睛的一种做法： 把输入框和小眼睛放在一个大的div里面， 然后在div里面设置相对定位，在小眼睛里面设置绝对定位（子绝父相）， 然后right=40%左右，padding-top= 实际尺寸，就可以达到小眼睛在输入框的右侧显示 .signin-item { //父盒子 position: relative..
基于vue ,iview 官方自带组件实现点击小眼睛显示和隐藏密码
weixin_57005594的博客
10-26 1074
在一次开发中，产品提出需求，需要密码实现点击小眼睛显示和隐藏密码，我原来iview官方组件会自带这个属性，一看文档傻了。话不多说上代码。 其中用<Password>这个的时候切不可直接动态切换type为password或text,不然console控制成空收到以下报错： 最后试了好几次还是用三目运算解决 ps:内联样式，见笑了。哈哈 ...
课堂作业：根据所学的Vue基础知识，来实现一个可以通过点击实现图片的显示和隐藏
Arciab的博客
03-20 621
定义一个Vue模板,使用css给这个模板设置一些样式，@click="change"设置一个点击事件，这个div盒子一旦被点击就会调用change函数。v-bind:im="img"将img中的value值与im绑定，改变im的value值。课堂作业：根据所学的Vue基础知识，来实现一个可以通过点击实现图片的显示和隐藏。v-show="show"设置图片是否显示，true为显示，false为隐藏。// 设置一个函数，通过取反来实现图片的显示与隐藏。// 使用模板，将这个模板命名为“xs"
用Vue写一个简单的多图片隐藏或显示
cjaksnsal的博客
03-21 217
主要是边框实线颜色，并且使用弹性布局，flex——wrap自动换行 ，Justify——content间距相等，不留空白。Onclick设计了点击事件，通过点击可以隐藏和显示图片，与show方法联系。下面代码创建了全局组件Vue.component优化代码结构，减少工作量。下边Item选择器对图片做一些修饰 高度 宽度 边距。创建数组，用来接收所有的图片路径。第二部为div做一个简单的装饰。第一步引入Vue完成相关配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值