目标效果
点击前
点击每个盒子后
代码如下
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cheems</title>
<script src="js/vue.js"></script> <!-- 切记!必须要引入vue.js文件 -->
<style>
.content {
width: 580px; /* 这里建议设置为切片前图片大小加30px左右 */
border: 1px solid blue; /* 设置边框 */
margin: 0 auto; /* 设置整个盒子居中显示 */
display: flex; /* 弹性布局 */
flex-wrap: wrap; /* 换行 */
justify-content: space-around; /* 对齐方式 */
}
img { /* 设置图片宽高，防止变形 */
width: 55px;
height: 54px;
}
.item { /* 设置每个图片所在盒子的宽高和背景色 */
width: 55px;
height: 54px;
margin: 2px 0;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<!-- 这里使用了循环v-for和属性单向数据绑定v-bind -->
<l-img v-for="i in imgs" v-bind:im="i"></l-img>
<!-- 上面这行代码的执行流程为：依次循环取出imgs数组中的每个元素，将其放到下面v-bind:src中 -->
</div>
</div>
<template id="l-div">
<div class="item" @click="change"> <!-- 为盒子设置单击事件 -->
<img v-bind:src="im" v-show="show"> <!-- 点击盒子则将show的值取反，实现隐藏图片效果 -->
</div>
</template>
<script>
// 增强代码复用性可以在这里使用Vue组件
Vue.component("l-img",{ // "l-img为组件的名字"
template: "#l-div", // 定义组件长什么样子
props: ["im"], // 自定义一个属性
data: function(){
return {
show: false
}
},
methods: {
change:function(){ // 此方法为点击图片所在盒子的时候将属性show的值取反，实现图片隐藏
this.show = !this.show
}
}
})
var vm = new Vue({
el:"#app", /* 指明作用范围，这里作用范围为最外层大盒子 */
data: {
/* 这里定义一个存储路径的数组 */
imgs: ["img/ikun_01.jpg","img/ikun_02.jpg","img/ikun_03.jpg","img/ikun_04.jpg","img/ikun_05.jpg","img/ikun_06.jpg","img/ikun_07.jpg","img/ikun_08.jpg","img/ikun_09.jpg","img/ikun_10.jpg",
"img/ikun_11.jpg","img/ikun_12.jpg","img/ikun_13.jpg","img/ikun_14.jpg","img/ikun_15.jpg","img/ikun_16.jpg","img/ikun_17.jpg","img/ikun_18.jpg","img/ikun_19.jpg","img/ikun_20.jpg","img/ikun_21.jpg","img/ikun_22.jpg","img/ikun_23.jpg","img/ikun_24.jpg","img/ikun_25.jpg","img/ikun_26.jpg","img/ikun_27.jpg","img/ikun_28.jpg","img/ikun_29.jpg","img/ikun_30.jpg",
"img/ikun_31.jpg","img/ikun_32.jpg","img/ikun_33.jpg","img/ikun_34.jpg","img/ikun_35.jpg","img/ikun_36.jpg","img/ikun_37.jpg","img/ikun_38.jpg","img/ikun_39.jpg","img/ikun_40.jpg",
"img/ikun_41.jpg","img/ikun_42.jpg","img/ikun_43.jpg","img/ikun_44.jpg","img/ikun_45.jpg","img/ikun_46.jpg","img/ikun_47.jpg","img/ikun_48.jpg","img/ikun_49.jpg","img/ikun_50.jpg",
"img/ikun_51.jpg","img/ikun_52.jpg","img/ikun_53.jpg","img/ikun_54.jpg","img/ikun_55.jpg","img/ikun_56.jpg","img/ikun_57.jpg","img/ikun_58.jpg","img/ikun_59.jpg","img/ikun_60.jpg",
"img/ikun_61.jpg","img/ikun_62.jpg","img/ikun_63.jpg","img/ikun_64.jpg","img/ikun_65.jpg","img/ikun_66.jpg","img/ikun_67.jpg","img/ikun_68.jpg","img/ikun_69.jpg","img/ikun_70.jpg",
"img/ikun_71.jpg","img/ikun_72.jpg","img/ikun_73.jpg","img/ikun_74.jpg","img/ikun_75.jpg","img/ikun_76.jpg","img/ikun_77.jpg","img/ikun_78.jpg","img/ikun_79.jpg","img/ikun_80.jpg",
"img/ikun_81.jpg","img/ikun_82.jpg","img/ikun_83.jpg","img/ikun_84.jpg","img/ikun_85.jpg","img/ikun_86.jpg","img/ikun_87.jpg","img/ikun_88.jpg","img/ikun_89.jpg","img/ikun_90.jpg",
"img/ikun_91.jpg","img/ikun_92.jpg","img/ikun_93.jpg","img/ikun_94.jpg","img/ikun_95.jpg","img/ikun_96.jpg","img/ikun_97.jpg","img/ikun_98.jpg","img/ikun_99.jpg","img/ikun_100.jpg"
]
}
});
</script>
</body>
</html>
作业
