使用vue及自定义组件完成10×10图片点击效果

kg105

已于 2023-03-20 18:37:35 修改

阅读量208

点赞数 2

文章标签： vue html Powered by 金山文档

于 2023-03-20 18:34:21 首次发布

本文链接：https://blog.csdn.net/weixin_64047160/article/details/129671328

版权

步骤：先切割图片，导入图片到img文件，导入vue.js，写div盒子放图片，用弹性布局快速定位图片，使用组件实现点击效果

1.html结构

第一步：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
1.引入js文件
<script type="text/javascript" src="js/vue.js"></script>
2.使用ps切片工具将图片切成10×10并导入
1. html结构
2. 定义两个盒子
<div id="app">
<div class="content">
<!--通过v-for循环将图片遍历显示-->
<test-div v-for="i in imgs" :im="i"></test-div>
</div>
</div>
<!--template标签定义结构的模板，为template模板定义属性，然后通过.item进行绑定-->
<template id="temp">
//绑定onclick实现点击
<div class="item" @click="change">
//v-show指令显示和隐藏
<img :src="im" v-show="show" />
</div>
</template>

2.css样式

<style type="text/css">
            .content {
                width: 850px;
                border: 1px solid pink;
                margin: 0 auto;
//display弹性布局
                display: flex;
//用于描述弹性盒子容器的对齐方式，它包含沿着分布在浏览器中的 
flex 容器的主轴的内容项之间和周围的空间
                justify-content: space-around;
//flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
wrap是自动换行，nowrap是不换行
                flex-wrap: wrap;
            }
            
            .item {
                width: 80px;
                height: 45px;
                margin: 2px 0px;
                background-color: pink;
            }
            
            img {
                width: 80px;
                height: 45px;
            }
        </style>

3.创建组件和vue实例对象

<script>
            //注册一个全局组件
            Vue.component("test-div", {
                template: '#temp',
                //props用来接受父组件中的定义的数据，其值为数组，数组中是父组件传递的数据信息
                props: ["im"],
                data: function() {
                    return {
                        //show属性为true时显示，为false时隐藏
                        show: true,
                        img: "img/images/dog_01.jpg"
                    }
                },
                //定义方法调用
                methods: {
                    change: function() {
                        //每一次调用把数据传过去取反，点击显示隐藏
                        this.show = !this.show
                    }
                }
            });
            //创建vue实例对象
            var vm = new Vue({
                //1.绑定容器
                el: "#app",
                //存储图片路径，便于循环输出图片
                data: {
                    imgs: [
"img/images/dog_01.jpg", "img/images/dog_02.jpg", "img/images/dog_03.jpg", "img/images/dog_04.jpg", "img/images/dog_05.jpg", "img/images/dog_06.jpg", "img/images/dog_07.jpg", "img/images/dog_08.jpg", "img/images/dog_09.jpg", "img/images/dog_10.jpg", "img/images/dog_11.jpg", "img/images/dog_12.jpg", "img/images/dog_13.jpg", "img/images/dog_14.jpg", "img/images/dog_15.jpg", "img/images/dog_16.jpg", "img/images/dog_17.jpg", "img/images/dog_18.jpg", "img/images/dog_19.jpg", "img/images/dog_20.jpg", "img/images/dog_21.jpg", "img/images/dog_22.jpg", "img/images/dog_23.jpg", "img/images/dog_24.jpg", "img/images/dog_25.jpg", "img/images/dog_26.jpg", "img/images/dog_27.jpg", "img/images/dog_28.jpg", "img/images/dog_29.jpg", "img/images/dog_30.jpg", "img/images/dog_31.jpg", "img/images/dog_32.jpg", "img/images/dog_33.jpg", "img/images/dog_34.jpg", "img/images/dog_35.jpg", "img/images/dog_36.jpg", "img/images/dog_37.jpg", "img/images/dog_38.jpg", "img/images/dog_39.jpg", "img/images/dog_40.jpg", "img/images/dog_41.jpg", "img/images/dog_42.jpg", "img/images/dog_43.jpg", "img/images/dog_44.jpg", "img/images/dog_45.jpg", "img/images/dog_46.jpg", "img/images/dog_47.jpg", "img/images/dog_48.jpg", "img/images/dog_49.jpg", "img/images/dog_50.jpg", "img/images/dog_51.jpg", "img/images/dog_52.jpg", "img/images/dog_53.jpg", "img/images/dog_54.jpg", "img/images/dog_55.jpg", "img/images/dog_56.jpg", "img/images/dog_57.jpg", "img/images/dog_58.jpg", "img/images/dog_59.jpg", "img/images/dog_60.jpg", "img/images/dog_61.jpg", "img/images/dog_62.jpg", "img/images/dog_63.jpg", "img/images/dog_64.jpg", "img/images/dog_65.jpg", "img/images/dog_66.jpg", "img/images/dog_67.jpg", "img/images/dog_68.jpg", "img/images/dog_69.jpg", "img/images/dog_70.jpg", "img/images/dog_71.jpg", "img/images/dog_72.jpg", "img/images/dog_73.jpg", "img/images/dog_74.jpg", "img/images/dog_75.jpg", "img/images/dog_76.jpg", "img/images/dog_77.jpg", "img/images/dog_78.jpg", "img/images/dog_79.jpg", "img/images/dog_80.jpg", "img/images/dog_81.jpg", "img/images/dog_82.jpg", "img/images/dog_83.jpg", "img/images/dog_84.jpg", "img/images/dog_85.jpg", "img/images/dog_86.jpg", "img/images/dog_87.jpg", "img/images/dog_88.jpg", "img/images/dog_89.jpg", "img/images/dog_90.jpg", "img/images/dog_91.jpg", "img/images/dog_92.jpg", "img/images/dog_93.jpg", "img/images/dog_94.jpg", "img/images/dog_95.jpg", "img/images/dog_96.jpg", "img/images/dog_97.jpg", "img/images/dog_98.jpg", "img/images/dog_99.jpg", "img/images/dog_100 
]
                }
            })
        </script>

</html>