一.效果展示
原始效果
![](https://i-blog.csdnimg.cn/blog_migrate/d0aef267229ecdf3ce0bf50c7fb6ae64.png)
依次点击前两排图片实现隐藏效果,再次点击恢复原始效果
![](https://i-blog.csdnimg.cn/blog_migrate/e88f81be3dc87f7d52fcc0072ea444fb.png)
二.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue.js"></script><!--引入vue.js-->
<style>
.content {
width: 630px;/* 盒子宽度要比照片宽度大 */
border: 1px solid red;/* 设置边框 */
margin: 0 auto;
display: flex;/* 弹性布局 */
flex-wrap: wrap;/* 换行 */
justify-content: space-around;/* 对齐方式 */
}
img {
width: 60px;
height: 34px;
}
.item { /* 设置图片所在盒子的宽高和背景色 */
width: 60px;
height: 34px;
background-color: #ccc;
margin: 2px 0px;
}
</style>
<body>
<div id="app">
<div class="content">
<!-- 这里使用了循环v-for和属性单向数据绑定v-bind -->
<hhh-img v-for="i in imgs" v-bind:im="i"></hhh-img>
<!--v-for用来循环-->
</div>
</div>
<!--组件模板-->
<template id="testImg">
<div class="item" @click="change"><!--为该盒子绑定了事件,click表示点击事件-->
<img v-bind:src="im" v-show="show" /><!--v-bind绑定src值-->
</div>
</template>
<script type="text/javascript">
//创建组件
Vue.component("hhh-img", {//hhh-img为组件名
template: "#testImg",//与组件板块进行绑定
props: ["im"],//接受父组件传来的数据
data: function(){
return{
show: true
}
},
methods:{
change: function(){//单击盒子后change方法将show值取反,将图片隐藏
this.show = !this.show;
}
}
})
//创建Vue实例
var vm = new Vue({
el: "#app",//通过el与div元素绑定
data: {
//定义数组储存图片路径
imgs: ["img/sj_01.jpg","img/sj_02.jpg", "img/sj_03.jpg","img/sj_04.jpg","img/sj_05.jpg",
"img/sj_06.jpg","img/sj_07.jpg","img/sj_08.jpg","img/sj_09.jpg","img/sj_10.jpg",
"img/sj_11.jpg","img/sj_12.jpg","img/sj_13.jpg","img/sj_14.jpg","img/sj_15.jpg",
"img/sj_16.jpg","img/sj_17.jpg","img/sj_18.jpg","img/sj_19.jpg","img/sj_20.jpg",
"img/sj_21.jpg","img/sj_22.jpg","img/sj_23.jpg","img/sj_24.jpg","img/sj_25.jpg",
"img/sj_26.jpg","img/sj_27.jpg","img/sj_28.jpg","img/sj_29.jpg","img/sj_30.jpg",
"img/sj_31.jpg","img/sj_32.jpg","img/sj_33.jpg","img/sj_34.jpg","img/sj_35.jpg",
"img/sj_36.jpg","img/sj_37.jpg","img/sj_38.jpg","img/sj_39.jpg","img/sj_40.jpg",
"img/sj_41.jpg","img/sj_42.jpg","img/sj_43.jpg","img/sj_44.jpg","img/sj_45.jpg",
"img/sj_46.jpg","img/sj_47.jpg","img/sj_48.jpg","img/sj_49.jpg","img/sj_50.jpg",
"img/sj_51.jpg","img/sj_52.jpg","img/sj_53.jpg","img/sj_54.jpg","img/sj_55.jpg",
"img/sj_56.jpg","img/sj_57.jpg","img/sj_58.jpg","img/sj_59.jpg","img/sj_60.jpg",
"img/sj_61.jpg","img/sj_62.jpg","img/sj_63.jpg","img/sj_64.jpg","img/sj_65.jpg",
"img/sj_66.jpg","img/sj_67.jpg","img/sj_68.jpg","img/sj_69.jpg","img/sj_70.jpg",
"img/sj_71.jpg","img/sj_72.jpg","img/sj_73.jpg","img/sj_74.jpg","img/sj_75.jpg",
"img/sj_76.jpg","img/sj_77.jpg","img/sj_78.jpg","img/sj_79.jpg","img/sj_80.jpg",
"img/sj_81.jpg","img/sj_82.jpg","img/sj_83.jpg","img/sj_84.jpg","img/sj_85.jpg",
"img/sj_86.jpg","img/sj_87.jpg","img/sj_88.jpg","img/sj_89.jpg","img/sj_90.jpg",
"img/sj_91.jpg","img/sj_92.jpg","img/sj_93.jpg","img/sj_94.jpg","img/sj_95.jpg",
"img/sj_96.jpg","img/sj_97.jpg","img/sj_98.jpg","img/sj_99.jpg","img/sj_100.jpg",
]
}
})
</script>
</body>
</html>
三.附件链接
我用夸克网盘分享了「附件」,点击链接即可保存。打开「夸克APP」,无需下载在线播放视频,畅享原画5倍速,支持电视投屏。
链接:https://pan.quark.cn/s/209a33a36fde
提取码:m7Se