全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: green
}
.content {
width: 1920px;
border: 1px solid red;
margin: 0 auto;
/*弹性布局*/
display: flex;
/*在住轴上的对齐方式*/
justify-content: space-around;
/*是否换行*/
flex-wrap: wrap;
}
.item {
width: 189px;
height: 142px;
margin: 3px 1px;
background-color: #FF0000
}
img{
width: 189px;
height: 142px;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="content">
<test-div v-for="i in imgs" :im="i"></test-div>
</div>
</div>
<template id="fu-temp">
<div class="item" @click="change">
<img :src="im" v-show="show" />
</div>
</template>
<script>
Vue.component("test-div", {
template: '#fu-temp',
props: ["im"],
data: function() {
return {
show: true,
img: "img/12346_01.gif"
}
},
methods: {
change: function() {
this.show = !this.show
}
}
});
var vm = new Vue({
el: "#app",
data: {
imgs: ["img/12346_01.gif", "img/12346_02.gif", "img/12346_03.gif", "img/12346_04.gif", "img/12346_05.gif",
"img/12346_06.gif", "img/12346_07.gif", "img/12346_08.gif", "img/12346_09.gif",
"img/12346_10.gif", "img/12346_11.gif", "img/12346_12.gif", "img/12346_13.gif",
"img/12346_14.gif", "img/12346_15.gif", "img/12346_16.gif", "img/12346_17.gif",
"img/12346_18.gif", "img/12346_19.gif", "img/12346_20.gif", "img/12346_21.gif",
"img/12346_22.gif", "img/12346_23.gif", "img/12346_24.gif", "img/12346_25.gif",
"img/12346_26.gif", "img/12346_27.gif", "img/12346_28.gif", "img/12346_29.gif",
"img/12346_30.gif", "img/12346_31.gif", "img/12346_32.gif", "img/12346_33.gif",
"img/12346_34.gif", "img/12346_35.gif", "img/12346_36.gif", "img/12346_37.gif",
"img/12346_38.gif", "img/12346_39.gif", "img/12346_40.gif", "img/12346_41.gif",
"img/12346_42.gif", "img/12346_43.gif", "img/12346_44.gif", "img/12346_45.gif",
"img/12346_46.gif", "img/12346_47.gif", "img/12346_48.gif", "img/12346_49.gif",
"img/12346_50.gif", "img/12346_51.gif", "img/12346_52.gif", "img/12346_53.gif",
"img/12346_54.gif", "img/12346_55.gif", "img/12346_56.gif", "img/12346_57.gif",
"img/12346_58.gif", "img/12346_59.gif", "img/12346_60.gif", "img/12346_61.gif",
"img/12346_62.gif", "img/12346_63.gif", "img/12346_64.gif", "img/12346_65.gif",
"img/12346_66.gif", "img/12346_67.gif", "img/12346_68.gif", "img/12346_69.gif",
"img/12346_70.gif", "img/12346_71.gif", "img/12346_72.gif", "img/12346_73.gif",
"img/12346_74.gif", "img/12346_75.gif", "img/12346_76.gif", "img/12346_77.gif",
"img/12346_78.gif", "img/12346_79.gif", "img/12346_80.gif", "img/12346_81.gif",
"img/12346_82.gif", "img/12346_83.gif", "img/12346_84.gif", "img/12346_85.gif",
"img/12346_86.gif", "img/12346_87.gif", "img/12346_88.gif", "img/12346_89.gif",
"img/12346_90.gif", "img/12346_91.gif", "img/12346_92.gif", "img/12346_93.gif",
"img/12346_94.gif", "img/12346_95.gif", "img/12346_96.gif", "img/12346_97.gif",
"img/12346_98.gif", "img/12346_99.gif", "img/12346_100.gif"
]
}
})
</script>
</body>
</html>
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/ccc49093889856f54e26c7394ba1b4a3.png)
未点击状态
![](https://i-blog.csdnimg.cn/blog_migrate/4266438842c14c362258411e661c47c3.png)
点击状态
找出你想用的图片,将它切成任意等分,我这里切成了10*10等分(切图建议使用ps工具)
也可以使用文章中的图片点我
需要vue.js文件点我
首先我们引入Vue.js
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
布局部分
布局方面我们创建两个div,和一个自定义组件
imgs代表循环次数后面我们
<div id="app">
<div class="content">
<test-div v-for="i in imgs" :im="i"></test-div>
</div>
</div>
css部分,布局方面我们使用弹性布局,并设置换行
<style type="text/css">
body {
background-color: green
}
.content {
width: 1920px;
border: 1px solid red;
margin: 0 auto;
/*弹性布局*/
display: flex;
/*在住轴上的对齐方式*/
justify-content: space-around;
/*是否换行*/
flex-wrap: wrap;
}
.item {
width: 189px;
height: 142px;
margin: 3px 1px;
background-color: #FF0000
}
img{
width: 189px;
height: 142px;
}
</style>
自定义组件的使用
1.@click:完成盒子点击事件的效果
2.v-show:实现点击盒子进行show的取反
<template id="fu-temp">
<div class="item" @click="change">
<img :src="im" v-show="show" />
</div>
</template>
Vue部分
自定义组件
1.props:自定义属性
2.data:图片的地址和显示
3.methods:此方法为点击盒子进行show的取反,实现隐藏图片的效果
4.template:定义组件长什么样子
Vue.component("test-div", {
template: '#fu-temp',
props: ["im"],
data: function() {
return {
show: true,
img: "img/12346_01.gif"
}
},
methods: {
change: function() {
this.show = !this.show
}
}
});
Vue实例化
1.el:作用范围
2.data:定义一个储存路径的数组
3.imgs里面放几张图就循环几次
var vm = new Vue({
el: "#app",
data: {
imgs: ["img/12346_01.gif", "img/12346_02.gif", "img/12346_03.gif", "img/12346_04.gif", "img/12346_05.gif",
"img/12346_06.gif", "img/12346_07.gif", "img/12346_08.gif", "img/12346_09.gif",
"img/12346_10.gif", "img/12346_11.gif", "img/12346_12.gif", "img/12346_13.gif",
"img/12346_14.gif", "img/12346_15.gif", "img/12346_16.gif", "img/12346_17.gif",
"img/12346_18.gif", "img/12346_19.gif", "img/12346_20.gif", "img/12346_21.gif",
"img/12346_22.gif", "img/12346_23.gif", "img/12346_24.gif", "img/12346_25.gif",
"img/12346_26.gif", "img/12346_27.gif", "img/12346_28.gif", "img/12346_29.gif",
"img/12346_30.gif", "img/12346_31.gif", "img/12346_32.gif", "img/12346_33.gif",
"img/12346_34.gif", "img/12346_35.gif", "img/12346_36.gif", "img/12346_37.gif",
"img/12346_38.gif", "img/12346_39.gif", "img/12346_40.gif", "img/12346_41.gif",
"img/12346_42.gif", "img/12346_43.gif", "img/12346_44.gif", "img/12346_45.gif",
"img/12346_46.gif", "img/12346_47.gif", "img/12346_48.gif", "img/12346_49.gif",
"img/12346_50.gif", "img/12346_51.gif", "img/12346_52.gif", "img/12346_53.gif",
"img/12346_54.gif", "img/12346_55.gif", "img/12346_56.gif", "img/12346_57.gif",
"img/12346_58.gif", "img/12346_59.gif", "img/12346_60.gif", "img/12346_61.gif",
"img/12346_62.gif", "img/12346_63.gif", "img/12346_64.gif", "img/12346_65.gif",
"img/12346_66.gif", "img/12346_67.gif", "img/12346_68.gif", "img/12346_69.gif",
"img/12346_70.gif", "img/12346_71.gif", "img/12346_72.gif", "img/12346_73.gif",
"img/12346_74.gif", "img/12346_75.gif", "img/12346_76.gif", "img/12346_77.gif",
"img/12346_78.gif", "img/12346_79.gif", "img/12346_80.gif", "img/12346_81.gif",
"img/12346_82.gif", "img/12346_83.gif", "img/12346_84.gif", "img/12346_85.gif",
"img/12346_86.gif", "img/12346_87.gif", "img/12346_88.gif", "img/12346_89.gif",
"img/12346_90.gif", "img/12346_91.gif", "img/12346_92.gif", "img/12346_93.gif",
"img/12346_94.gif", "img/12346_95.gif", "img/12346_96.gif", "img/12346_97.gif",
"img/12346_98.gif", "img/12346_99.gif", "img/12346_100.gif"
]
}
})
好的到这里我们的项目算是完成了,祝大家生活愉快!!!