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

最新推荐文章于 2024-09-14 09:50:15 发布

RXYX

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量94

点赞数 3

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/2301_77077512/article/details/129700468

版权

引入vue.js

<head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js"></script>

html部分

<body>
        <!-- 定义一个id为app标签 -->
        <div id="app">
            <!-- 在id为app的标签中再定义一个class为content的标签 -->
            <div class="content">
                <!-- 用v-for将图片循环遍历显示 -->
                <test-div v-for="i in imgs" :im="i"></test-div>
            </div>
        </div>
        <!-- template 标签定义结构的模板，为其template模板定义属性，通过.item进行绑定-->
        <template id="temp">
            <!-- 对图片定义一个点击事件 -->
            <div class="item" @click="change">
                <!-- v-show为是否显示的判断 -->
                <img :src="im" v-show="show" />
            </div>
        </template>

注册一个全局组件

用methods方法实现图片点击效果

创建vue实例对象

<script>
            // 注册一个全局组件
            Vue.component("test-div", {
                template: '#temp',
                // props用来接受父组件定义的数据
                props: ["im"],
                data: function() {
                    return {
                        // show为true时，则显示。为false时隐藏
                        show: true,
                        img:"img/images/L_01.jpg"
                    }
                },
                methods: {
                    change: function() {
                        // 每一次调用把数据传过去进行取反，点击显示隐藏
                        this.show = !this.show
                    }
                }
            });
            // 创建一个实例对象
            var vm = new Vue({
                // 与id为app的元素进行绑定
                el: "#app",
                // 储存图片路径(以下imgs中的图片)
                data: {
                    imgs: ["img/images/L_01.jpg","img/images/L_02.gif","img/images/L_03.gif","img/images/L_04.gif","img/images/L_05.gif","img/images/L_06.gif","img/images/L_07.gif","img/images/L_08.gif","img/images/L_09.gif","img/images/L_10.gif","img/images/L_11.gif","img/images/L_12.gif","img/images/L_13.gif","img/images/L_14.gif","img/images/L_15.gif","img/images/L_16.gif","img/images/L_17.gif","img/images/L_18.gif","img/images/L_19.gif","img/images/L_20.gif","img/images/L_21.gif","img/images/L_22.gif","img/images/L_23.gif","img/images/L_24.gif",

定义style样式

<style type="text/css">
            .content {
                width: 850px;
                border: 1px solid mediumpurple;
                margin: 0 auto;
                /* 弹性布局 */
                display: flex;
                justify-content: space-around;
                /* flex进行换行,wrap为自动换行，nowrap不换行 */
                flex-wrap: wrap;
            }

            .item {
                width: 80px;
                height: 45px;
                margin: 2px 0px;
                background-color: mediumpurple;
            }

            img {
                width: 80px;
                height: 45px;
            }
        </style>