<!DOCTYPE html>
<html>
<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",/* 用于指明Vue实例的挂载目标，也就是作用范围，这里的作用范围为最外层大盒子 */
data: {
/* 这里定义一个存储路径的数组 */
imgs: ["images/cheems_01.jpg","images/cheems_02.jpg","images/cheems_03.jpg","images/cheems_04.jpg","images/cheems_05.jpg","images/cheems_06.jpg","images/cheems_07.jpg","images/cheems_08.jpg","images/cheems_09.jpg","images/cheems_10.jpg",
"images/cheems_11.jpg","images/cheems_12.jpg","images/cheems_13.jpg","images/cheems_14.jpg","images/cheems_15.jpg","images/cheems_16.jpg","images/cheems_17.jpg","images/cheems_18.jpg","images/cheems_19.jpg","images/cheems_20.jpg",
"images/cheems_21.jpg","images/cheems_22.jpg","images/cheems_23.jpg","images/cheems_24.jpg","images/cheems_25.jpg","images/cheems_26.jpg","images/cheems_27.jpg","images/cheems_28.jpg","images/cheems_29.jpg","images/cheems_30.jpg",
"images/cheems_31.jpg","images/cheems_32.jpg","images/cheems_33.jpg","images/cheems_34.jpg","images/cheems_35.jpg","images/cheems_36.jpg","images/cheems_37.jpg","images/cheems_38.jpg","images/cheems_39.jpg","images/cheems_40.jpg",
"images/cheems_41.jpg","images/cheems_42.jpg","images/cheems_43.jpg","images/cheems_44.jpg","images/cheems_45.jpg","images/cheems_46.jpg","images/cheems_47.jpg","images/cheems_48.jpg","images/cheems_49.jpg","images/cheems_50.jpg",
"images/cheems_51.jpg","images/cheems_52.jpg","images/cheems_53.jpg","images/cheems_54.jpg","images/cheems_55.jpg","images/cheems_56.jpg","images/cheems_57.jpg","images/cheems_58.jpg","images/cheems_59.jpg","images/cheems_60.jpg",
"images/cheems_61.jpg","images/cheems_62.jpg","images/cheems_63.jpg","images/cheems_64.jpg","images/cheems_65.jpg","images/cheems_66.jpg","images/cheems_67.jpg","images/cheems_68.jpg","images/cheems_69.jpg","images/cheems_70.jpg",
"images/cheems_71.jpg","images/cheems_72.jpg","images/cheems_73.jpg","images/cheems_74.jpg","images/cheems_75.jpg","images/cheems_76.jpg","images/cheems_77.jpg","images/cheems_78.jpg","images/cheems_79.jpg","images/cheems_80.jpg",
"images/cheems_81.jpg","images/cheems_82.jpg","images/cheems_83.jpg","images/cheems_84.jpg","images/cheems_85.jpg","images/cheems_86.jpg","images/cheems_87.jpg","images/cheems_88.jpg","images/cheems_89.jpg","images/cheems_90.jpg",
"images/cheems_91.jpg","images/cheems_92.jpg","images/cheems_93.jpg","images/cheems_94.jpg","images/cheems_95.jpg","images/cheems_96.jpg","images/cheems_97.jpg","images/cheems_98.jpg","images/cheems_99.jpg","images/cheems_100.jpg"]
}
});
</script>
</body>
</html>
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
