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

最新推荐文章于 2024-04-10 10:25:34 发布

2301_76828893

最新推荐文章于 2024-04-10 10:25:34 发布

阅读量205

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76828893/article/details/129699653

版权

本文介绍了如何使用Vue.js和自定义组件实现图片表格的点击隐藏效果。首先，通过Photoshop切片工具分割图片，然后导入Vue项目。接着，利用弹性布局展示图片。在Vue模板中，结合click事件和v-show指令，为每个图片容器添加点击响应，实现点击图片后隐藏的效果。当页面元素复杂时，组件化可帮助简化代码。

摘要由CSDN通过智能技术生成

1.将图片分割成需要的大小(可以使用ps里面的切片工具）

2.导入并连接vue.js文件，将图片导入img文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<!--连接vue.js -->
		<script type="text/javascript" src="js/vue.js"></script>

3.通过采用弹性布局，排列图片

<style>
			.content{
				width: 1150px;
				margin: 0 auto;
				border: 1px solid skyblue;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.item{
				height: 106px;
				width: 106px;
				background-color: #ccc;
				margin: 5px 3px;
			}
		</style>

4.我们先写一个div标签，id为app，然后再写一个div标签class,content里边放置img图片

<body>
		<div id="app">
			<div class="content">
				<aa_img v-for="i in imgs" :im="i">

最低0.47元/天解锁文章

2301_76828893

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

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