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

m0_71014221

已于 2023-03-21 20:30:50 修改

阅读量167

点赞数

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

于 2023-03-20 20:52:18 首次发布

本文链接：https://blog.csdn.net/m0_71014221/article/details/129675802

版权

思路：创建一个数组，将所有图片放进去，利用props，v-for，v-bind将图片传入HTML中。

在头部引入vue文件

<script src="js/vue.js"></script>

创建一个新的div接收传值（例如lyy-img），并用v-for进行循环，v-bind进行属性绑定。

<div id="app">
            <div class="content">
                <lyy-img v-for="i in imgs" :im="i"></lyy-img>     
            </div>
        </div>

定义一个<template>组件，里面写入需要传入lyy-img的值，并用v-bind进行绑定。

<template id="test">
            <div class="item" @click="change">
                <img :src="im" v-show="show"/>
            </div>
        </template>

定义全局组件，实现传值效果。

Vue.component("lyy-img",{
                template:"#test",
                props:["im"],//自定义属性
                data:function(){
                    return{
                        show:true
                    }
                },
                methods:{
                    change:function(){
                        this.show = !this.show;
                    }
                }
            });

定义新的vue，并在里面定义图片数组。

var vm = new Vue({
                el:"#app",
                data:{
                    imgs:[
                    "img/images/yuanshen_01.jpg",
                    "img/images/yuanshen_02.gif",
                    "img/images/yuanshen_03.gif",
                    "img/images/yuanshen_04.gif",
                    "img/images/yuanshen_05.gif",
                    "img/images/yuanshen_06.gif",
                    "img/images/yuanshen_07.gif",
                    "img/images/yuanshen_08.gif",
                    "img/images/yuanshen_09.gif",
                    "img/images/yuanshen_10.gif",
                    "img/images/yuanshen_11.gif",
                    "img/images/yuanshen_12.gif",
                    "img/images/yuanshen_13.gif",
                    "img/images/yuanshen_14.gif",
                    "img/images/yuanshen_15.gif",
                    "img/images/yuanshen_16.gif",
                    "img/images/yuanshen_17.gif",
                    "img/images/yuanshen_18.gif",
                    "img/images/yuanshen_19.gif",
                    "img/images/yuanshen_20.gif",
                    "img/images/yuanshen_21.gif",
                    "img/images/yuanshen_22.gif",
                    "img/images/yuanshen_23.gif",
                    "img/images/yuanshen_24.gif",
                    "img/images/yuanshen_25.gif",
                    ]

                }                
            });

样式

.content{
                width: 1300px;
                margin: 0 auto;
                border: 1px solid #000000;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .item{
                height: 144px;
                width: 256px;
                background-color: #ccc;
                margin: 5px 0px;
                //样式
            }
            img{
                width: 256px;
                height: 144px;
                //图片样式设置
            }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <style>
            .content{
                width: 1300px;
                margin: 0 auto;
                border: 1px solid #000000;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .item{
                height: 144px;
                width: 256px;
                background-color: #ccc;
                margin: 5px 0px;
                //样式
            }
            img{
                width: 256px;
                height: 144px;
                //图片样式设置
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="content">
                <lyy-img v-for="i in imgs" :im="i"></lyy-img>     
            </div>
        </div>
        <template id="test">
            <div class="item" @click="change">
                <img :src="im" v-show="show"/>
            </div>
        </template>
        <script>
            //组件
            //2.新建组件，注册组件
            Vue.component("lyy-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/images/yuanshen_01.jpg",
                    "img/images/yuanshen_02.gif",
                    "img/images/yuanshen_03.gif",
                    "img/images/yuanshen_04.gif",
                    "img/images/yuanshen_05.gif",
                    "img/images/yuanshen_06.gif",
                    "img/images/yuanshen_07.gif",
                    "img/images/yuanshen_08.gif",
                    "img/images/yuanshen_09.gif",
                    "img/images/yuanshen_10.gif",
                    "img/images/yuanshen_11.gif",
                    "img/images/yuanshen_12.gif",
                    "img/images/yuanshen_13.gif",
                    "img/images/yuanshen_14.gif",
                    "img/images/yuanshen_15.gif",
                    "img/images/yuanshen_16.gif",
                    "img/images/yuanshen_17.gif",
                    "img/images/yuanshen_18.gif",
                    "img/images/yuanshen_19.gif",
                    "img/images/yuanshen_20.gif",
                    "img/images/yuanshen_21.gif",
                    "img/images/yuanshen_22.gif",
                    "img/images/yuanshen_23.gif",
                    "img/images/yuanshen_24.gif",
                    "img/images/yuanshen_25.gif",
                    ]

                }                
            });
        </script>
    </body>
</html>