工具: HBuilder X
Js插件:Vue.js
教程:
首先引入Js插件
<script type="text/javascript" src="js/vue.js"></script>
然后在body里面创建一个id为app的div,在id为app的div里面再创建一个class为content的div用于放置图片
<body>
<div id="app">
<div class="content">
<aa_img v-for="i in imgs" :im="i"></aa_img>
</div>
</div>
</body>
在head里面添加style标签,在style标签里面为app ,content两个div设置布局
<style>
.content{
width: 1120px;
margin: 0 auto;
border: 1px solid skyblue;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item{
height: 91px;
width: 102px;
background-color: #ccc;
margin: 5px 0px;
}
</style>
接下来我们在div为"app"的下面或者body的下面创建一个script,定义一个Vue方法并且绑定div为"app"的盒子
var vm = new Vue({
el:"#app",
data:{
imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
}
然后添加已给的组件,将父组件给子组件进行传值(传图片路径)
<script>
Vue.component("aa_img",{
template:"#test",
props:["im"],
data:function(){
return{
show:true
}
},
methods:{
change:function(){
this.show = !this.show;
}
}
})
var vm = new Vue({
el:"#app",
data:{
imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
}
});
</script>
在class为"content"的div里面添加自己定义的"aa_img",并给它设置V-for循环(给图片传值)
<div class="content">
<aa_img v-for="i in imgs" :im="i"></aa_img>
</div>
在script的data里面传入所有的图片地址,最后运行
data:{
imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
}
效果预览:
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
.content{
width: 1120px;
margin: 0 auto;
border: 1px solid skyblue;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item{
height: 91px;
width: 102px;
background-color: #ccc;
margin: 5px 0px;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<aa_img v-for="i in imgs" :im="i"></aa_img>
</div>
</div>
</body>
<template id="test">
<div class="item" @click="change">
<img :src="im" v-show="show"/>
</div>
</template>
<script>
Vue.component("aa_img",{
template:"#test",
props:["im"],
data:function(){
return{
show:true
}
},
methods:{
change:function(){
this.show = !this.show;
}
}
})
var vm = new Vue({
el:"#app",
data:{
imgs:["img/ss_01.jpg ","img/ss_02.jpg ","img/ss_03.jpg ","img/ss_04.jpg ","img/ss_05.jpg ","img/ss_06.jpg ","img/ss_07.jpg ","img/ss_08.jpg ","img/ss_09.jpg ","img/ss_10.jpg ","img/ss_11.jpg ","img/ss_12.jpg ","img/ss_13.jpg ","img/ss_14.jpg ","img/ss_15.jpg ","img/ss_16.jpg ","img/ss_17.jpg ","img/ss_18.jpg ","img/ss_19.jpg ","img/ss_20.jpg ","img/ss_21.jpg ","img/ss_22.jpg ","img/ss_23.jpg ","img/ss_24.jpg ","img/ss_25.jpg ","img/ss_26.jpg ","img/ss_27.jpg ","img/ss_28.jpg ","img/ss_29.jpg ","img/ss_30.jpg ","img/ss_31.jpg ","img/ss_32.jpg ","img/ss_33.jpg ","img/ss_34.jpg ","img/ss_35.jpg ","img/ss_36.jpg ","img/ss_37.jpg ","img/ss_38.jpg ","img/ss_39.jpg ","img/ss_40.jpg ","img/ss_41.jpg ","img/ss_42.jpg ","img/ss_43.jpg ","img/ss_44.jpg ","img/ss_45.jpg ","img/ss_46.jpg ","img/ss_47.jpg ","img/ss_48.jpg ","img/ss_49.jpg ","img/ss_50.jpg ","img/ss_51.jpg ","img/ss_52.jpg ","img/ss_53.jpg ","img/ss_54.jpg ","img/ss_55.jpg ","img/ss_56.jpg ","img/ss_57.jpg ","img/ss_58.jpg ","img/ss_59.jpg ","img/ss_60.jpg ","img/ss_61.jpg ","img/ss_62.jpg ","img/ss_63.jpg ","img/ss_64.jpg ","img/ss_65.jpg ","img/ss_66.jpg ","img/ss_67.jpg ","img/ss_68.jpg ","img/ss_69.jpg ","img/ss_70.jpg ","img/ss_71.jpg ","img/ss_72.jpg ","img/ss_73.jpg ","img/ss_74.jpg ","img/ss_75.jpg ","img/ss_76.jpg ","img/ss_77.jpg ","img/ss_78.jpg ","img/ss_79.jpg ","img/ss_80.jpg ","img/ss_81.jpg ","img/ss_82.jpg ","img/ss_83.jpg ","img/ss_84.jpg ","img/ss_85.jpg ","img/ss_86.jpg ","img/ss_87.jpg ","img/ss_88.jpg ","img/ss_89.jpg ","img/ss_90.jpg ","img/ss_91.jpg ","img/ss_92.jpg ","img/ss_93.jpg ","img/ss_94.jpg ","img/ss_95.jpg ","img/ss_96.jpg ","img/ss_97.jpg ","img/ss_98.jpg ","img/ss_99.jpg ","img/ss_100.jpg"]
}
});
</script>
</html>