​使用 Vue 及自定义组件完成 10x10 图片表格的点击效果

一.话不多,先看效果:

​编辑

工具: HBuilder X 

js插件:Vue.js

 二.详细实现步骤:

1.创建两个div,content用来调整盒子格式

<div id="app">

                       <div class="content">

                       </div>

.content{

                               width: 3100px;

                               margin: 0 auto;

                               border: 1px solid skyblue;

                               display: flex;

                               justify-content: space-between;

                               flex-wrap: wrap;

                       }

2.引入vue.js

<script type="text/javascript" src="js/vue.js"></script>

3.添加已给的组件,将父组件给子组件进行传值

Vue.component("aa_img",{

                       template:"#test",

                       props:["im"],

                       data:function(){

                              return{

                                      show:true

                               }

                       },

                       methods:{

                               change:function(){

                                      this.show = !this.show;

                               }

                       }

               })

4.在class为"content"的div里面添加自己定义的"aa_img",并给它设置V-for循环

<aa_img v-for="i in imgs" :im="i"></aa_img>

5.在data里面导入数组,并填入所有的图片地址,运行就可以啦

var vm = new Vue({

                       el:"#app",

                       data:{

                       imgs:["img/1_01.jpg","img/1_02.jpg","img/1_03.jpg","img/1_04.jpg","img/1_05.jpg","img/1_06.jpg","img/1_07.jpg","img/1_08.jpg","img/1_09.jpg","img/1_10.jpg","img/1_11.jpg","img/1_12.jpg","img/1_13.jpg","img/1_14.jpg","img/1_15.jpg","img/1_16.jpg","img/1_17.jpg","img/1_18.jpg","img/1_19.jpg","img/1_20.jpg","img/1_21.jpg","img/1_22.jpg","img/1_23.jpg","img/1_24.jpg","img/1_25.jpg","img/1_26.jpg","img/1_27.jpg","img/1_28.jpg","img/1_29.jpg","img/1_30.jpg","img/1_31.jpg","img/1_32.jpg","img/1_33.jpg","img/1_34.jpg","img/1_35.jpg","img/1_36.jpg","img/1_37.jpg","img/1_38.jpg","img/1_39.jpg","img/1_40.jpg","img/1_41.jpg","img/1_42.jpg","img/1_43.jpg","img/1_44.jpg","img/1_45.jpg","img/1_46.jpg","img/1_47.jpg","img/1_48.jpg","img/1_49.jpg","img/1_50.jpg","img/1_51.jpg","img/1_52.jpg","img/1_53.jpg","img/1_54.jpg","img/1_55.jpg","img/1_56.jpg","img/1_57.jpg","img/1_58.jpg","img/1_59.jpg","img/1_60.jpg","img/1_61.jpg","img/1_62.jpg","img/1_63.jpg","img/1_64.jpg","img/1_65.jpg","img/1_66.jpg","img/1_67.jpg","img/1_68.jpg","img/1_69.jpg","img/1_70.jpg","img/1_71.jpg","img/1_72.jpg","img/1_73.jpg","img/1_74.jpg","img/1_75.jpg","img/1_76.jpg","img/1_77.jpg","img/1_78.jpg","img/1_79.jpg","img/1_80.jpg","img/1_81.jpg","img/1_82.jpg","img/1_83.jpg","img/1_84.jpg","img/1_85.jpg","img/1_86.jpg","img/1_87.jpg","img/1_88.jpg","img/1_89.jpg","img/1_90.jpg","img/1_91.jpg","img/1_92.jpg","img/1_93.jpg","img/1_94.jpg","img/1_95.jpg","img/1_96.jpg","img/1_97.jpg","img/1_98.jpg","img/1_99.jpg","img/1_100.jpg"]

                               }

三.完整源码分享:

链接:https://pan.baidu.com/s/1SaN2GPJdX6kjqpH90LlVUg 
提取码:1111

四.总结:

这样子就完成了,这其实是老师的一次任务,刚接触vue.js,内容仅供参考,请大家多多指点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值