vue.js图片点击显示

最新推荐文章于 2024-10-16 16:14:40 发布

孟景川

最新推荐文章于 2024-10-16 16:14:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_70013544/article/details/129683319

本文介绍了如何使用Vue.js来实现图片点击显示的效果。首先导入vue.js并创建一个div盒子，设置样式。接着创建Vue对象，绑定div，并导入图片。在methods中定义change方法，通过this访问data数据。在模板中，利用v-show指令和click事件实现图片的点击显示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.导入vue.js 建立盒子div 加入样式style

2.创建vue对象，绑定div，导入img

3.在methods中定义一个change方法，在methods中访问data数据可以直接通过this+属性名的形式来访问，在change方法中，访问show属性可以直接通过this.show形式访问，其中this表示vue实例对象

4.定义id为test 利用template模仿占位符，帮助包裹元素，循环img图片，并通过click点击变化change，利用v-show让图片通过点击显示

5.最后页面点击效果：

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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