<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
<style>
.content {
margin: 0 auto;
width: 820px;
border: 1px solid aquamarine;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 5px;
margin: 5px 0px;
}
.item {}
</style>
</head>
<body>
<div id="app">
<!-- 图片展示区域 -->
<div class="content">
<!-- 循环遍历图片数组 -->
<fu-img v-for="(img, index) in imgs" :im="img" :key="index"></fu-img>
</div>
</div>
<!-- Vue 组件模板，显示单张图片 -->
<templ
本文介绍如何利用Vue.js框架实现图片的点击显示与隐藏功能。通过绑定点击事件和数据属性，实现单击图片后图片状态的切换，再次点击则恢复原状。
最低0.47元/天 解锁文章
扫一扫
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
