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

最新推荐文章于 2024-07-19 12:58:53 发布

林木203

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量81

点赞数

文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_64044233/article/details/129674501

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            /*定义大盒子控制内部小盒子元素*/
            #box {
                width: 1100px;
                border: 1px solid red;
                /*外边距：上下、左右自动*/
                margin: 100px auto;
                /* 弹性布局 */
                display: flex;
                /* 当元素占满一行自动换行 */
                flex-wrap: wrap;
                /* 对齐方式:两端对齐,间距相等 */
                justify-content: space-around;
            }

            /*定义控制组件里面的元素*/
            #items {
                width: 105px;
                height: 56px;
                background-color: pink;
                margin: 2px 0px;
            }

            img {
                width: 105px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--大容器提供给vm实例对象使用-->
            <div id="box">
                <!--小容器用于规范内部全部元素的样式-->
                <testimg v-for="item in imgs" :imgs="item"></testimg>
                <!--循环拿到imgs数组的每个对应元素，每一次循环都把拿到的数组元素给到item-->
            </div>
        </div>
    </body>
    <script>
        //1.创建testimg组件     这里   : 号的都是v-bind单向绑定数据
        const testimg = Vue.extend({
            //创建testimg的模板映射到html上     因为每一次循环的话template模板就会重新解析所以给大盒子div一个样式不让他乱
            template: `im
                        <div id="items" @click="showInfo()">
                            <img :src="imgs" v-show="show">
                        </div>
            `,
            //那么传过来的就相当于拿到数组imgs的第几个元素，给到挨个定义props工具里面，
            //然后模板img的属性src绑定的是imgs所以每循环一次输出v-for拿到的第几个元素
            props: [
                "imgs"
            ], //<testimg v-for="item in imgs" :imgs="item"></testimg>  循环传过来item拿到的就是数组imgs的每一个下标元素,输出也就是对应的下标元素
            //定义data绑定数据，因为组件里面的模板需要使用数据方法，所以在组件里面定义
            data() {
                return { //在组件里面data必须定义成函数，所以要有返回值返回数据
                    show: true
                }
            },
            //定义方法用于写调用函数方法
            methods: {
                showInfo() {
                    //每一次调用我就把数据给你取反，这样实现点击隐藏、显示
                    this.show = !this.show
                }
            }
        })
        //创建vm(vue)实例对象
        new Vue({
            //绑定容器
            el: "#app",
            //2.注册组件
            components: {
                testimg
            },
            data: {
                //定义imgs数组，存储图片路径,便于循环输出图片
                imgs: ["img/tu_01.gif", "img/tu_02.gif", "img/tu_03.gif", "img/tu_04.gif", "img/tu_05.gif",
                    "img/tu_06.gif", "img/tu_07.gif", "img/tu_08.gif", "img/tu_09.gif", "img/tu_10.gif",
                    "img/tu_11.gif", "img/tu_12.gif", "img/tu_13.gif", "img/tu_14.gif", "img/tu_15.gif",
                    "img/tu_16.gif", "img/tu_17.gif", "img/tu_18.gif", "img/tu_19.gif", "img/tu_20.gif",
                    "img/tu_21.gif", "img/tu_22.gif", "img/tu_23.gif", "img/tu_24.gif", "img/tu_25.gif",
                    "img/tu_26.gif", "img/tu_27.gif", "img/tu_28.gif", "img/tu_29.gif", "img/tu_30.gif",
                    "img/tu_31.gif", "img/tu_32.gif", "img/tu_33.gif", "img/tu_34.gif", "img/tu_35.gif",
                    "img/tu_36.gif", "img/tu_37.gif", "img/tu_38.gif", "img/tu_39.gif", "img/tu_40.gif",
                    "img/tu_41.gif", "img/tu_42.gif", "img/tu_43.gif", "img/tu_44.gif", "img/tu_45.gif",
                    "img/tu_46.gif", "img/tu_47.gif", "img/tu_48.gif", "img/tu_49.gif", "img/tu_50.gif",
                    "img/tu_51.gif", "img/tu_52.gif", "img/tu_53.gif", "img/tu_54.gif", "img/tu_55.gif",
                    "img/tu_56.gif", "img/tu_57.gif", "img/tu_58.gif", "img/tu_59.gif", "img/tu_60.gif",
                    "img/tu_61.gif", "img/tu_62.gif", "img/tu_63.gif", "img/tu_64.gif", "img/tu_65.gif",
                    "img/tu_66.gif", "img/tu_67.gif", "img/tu_68.gif", "img/tu_69.gif", "img/tu_70.gif",
                    "img/tu_71.gif", "img/tu_72.gif", "img/tu_73.gif", "img/tu_74.gif", "img/tu_75.gif",
                    "img/tu_76.gif", "img/tu_77.gif", "img/tu_78.gif", "img/tu_79.gif", "img/tu_80.gif",
                    "img/tu_81.gif", "img/tu_82.gif", "img/tu_83.gif", "img/tu_84.gif", "img/tu_85.gif",
                    "img/tu_86.gif", "img/tu_87.gif", "img/tu_88.gif", "img/tu_89.gif", "img/tu_90.gif",
                    "img/tu_91.gif", "img/tu_92.gif", "img/tu_93.gif", "img/tu_94.gif", "img/tu_95.gif",
                    "img/tu_96.gif", "img/tu_97.gif", "img/tu_98.gif", "img/tu_99.gif", "img/tu_100.gif"
                ]
            }
        })
    </script>
</html>