本文展示了如何利用Vue.js创建一个10x10的图片网格，通过自定义组件`d-img`实现了图片的显示和隐藏效果。通过`v-for`循环将多个图片绑定到`d-img`组件上，结合CSS的Flex布局实现了一个响应式的九宫格布局。点击图片可以切换其显示状态。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>10x10的图</title>
<script src="js/vue.js"></script><!--1.先引入js包,随后开始用全局变量component来自定义一个新的双标签（标签名自己起）(全局变量的意思是用component所定义的标签可以用在任何地方-->
<link rel="stylesheet" href="css/MC.css" type="text/css"><!--9.此时开始设置css样式,样式根据flex布局即可实现-->
</head>
<body>
<div id="app">
<d-img v-for="a in img
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
