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

标签：10 Vue 自定义 img tu jpg im 组件 2023218125410855jixiang

1.创建一个web项目，使用<script>引入Vue.js

代码如下：

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

 

2.创建vue实例

<div id="app">

    
</div>
<script>

　var vm = new Vue({
　　　el:"#app",//通过el与div元素绑定

  })

</script>

3.将剪切好的图片放入img文件夹下，再通过vue的data的属性获得图片

var vm = new Vue({
                el:"#app",
                data:{
                    imgs:["img/tu/2023218125410855jixiang_1.jpg","img/tu/2023218125410855jixiang_2.jpg","img/tu/2023218125410855jixiang_3.jpg","img/tu/2023218125410855jixiang_4.jpg","img/tu/2023218125410855jixiang_5.jpg","img/tu/2023218125410855jixiang_6.jpg","img/tu/2023218125410855jixiang_7.jpg","img/tu/2023218125410855jixiang_8.jpg","img/tu/2023218125410855jixiang_9.jpg","img/tu/2023218125410855jixiang_10.jpg","img/tu/2023218125410855jixiang_11.jpg","img/tu/2023218125410855jixiang_12.jpg","img/tu/2023218125410855jixiang_13.jpg","img/tu/2023218125410855jixiang_14.jpg","img/tu/2023218125410855jixiang_15.jpg","img/tu/2023218125410855jixiang_16.jpg","img/tu/2023218125410855jixiang_17.jpg","img/tu/2023218125410855jixiang_18.jpg","img/tu/2023218125410855jixiang_19.jpg","img/tu/2023218125410855jixiang_20.jpg","img/tu/2023218125410855jixiang_21.jpg","img/tu/2023218125410855jixiang_22.jpg","img/tu/2023218125410855jixiang_23.jpg","img/tu/2023218125410855jixiang_24.jpg","img/tu/2023218125410855jixiang_25.jpg","img/tu/2023218125410855jixiang_26.jpg","img/tu/2023218125410855jixiang_27.jpg","img/tu/2023218125410855jixiang_28.jpg","img/tu/2023218125410855jixiang_29.jpg","img/tu/2023218125410855jixiang_30.jpg","img/tu/2023218125410855jixiang_31.jpg","img/tu/2023218125410855jixiang_32.jpg","img/tu/2023218125410855jixiang_33.jpg","img/tu/2023218125410855jixiang_34.jpg","img/tu/2023218125410855jixiang_35.jpg","img/tu/2023218125410855jixiang_36.jpg","img/tu/2023218125410855jixiang_37.jpg","img/tu/2023218125410855jixiang_38.jpg","img/tu/2023218125410855jixiang_39.jpg","img/tu/2023218125410855jixiang_40.jpg","img/tu/2023218125410855jixiang_41.jpg","img/tu/2023218125410855jixiang_42.jpg","img/tu/2023218125410855jixiang_43.jpg","img/tu/2023218125410855jixiang_44.jpg","img/tu/2023218125410855jixiang_45.jpg","img/tu/2023218125410855jixiang_46.jpg","img/tu/2023218125410855jixiang_47.jpg","img/tu/2023218125410855jixiang_48.jpg","img/tu/2023218125410855jixiang_49.jpg","img/tu/2023218125410855jixiang_50.jpg","img/tu/2023218125410855jixiang_51.jpg","img/tu/2023218125410855jixiang_52.jpg","img/tu/2023218125410855jixiang_53.jpg","img/tu/2023218125410855jixiang_54.jpg","img/tu/2023218125410855jixiang_55.jpg","img/tu/2023218125410855jixiang_56.jpg","img/tu/2023218125410855jixiang_57.jpg","img/tu/2023218125410855jixiang_58.jpg","img/tu/2023218125410855jixiang_59.jpg","img/tu/2023218125410855jixiang_60.jpg","img/tu/2023218125410855jixiang_61.jpg","img/tu/2023218125410855jixiang_62.jpg","img/tu/2023218125410855jixiang_63.jpg","img/tu/2023218125410855jixiang_64.jpg","img/tu/2023218125410855jixiang_65.jpg","img/tu/2023218125410855jixiang_66.jpg","img/tu/2023218125410855jixiang_67.jpg","img/tu/2023218125410855jixiang_68.jpg","img/tu/2023218125410855jixiang_69.jpg","img/tu/2023218125410855jixiang_70.jpg","img/tu/2023218125410855jixiang_71.jpg","img/tu/2023218125410855jixiang_72.jpg","img/tu/2023218125410855jixiang_73.jpg","img/tu/2023218125410855jixiang_74.jpg","img/tu/2023218125410855jixiang_75.jpg","img/tu/2023218125410855jixiang_76.jpg","img/tu/2023218125410855jixiang_77.jpg","img/tu/2023218125410855jixiang_78.jpg","img/tu/2023218125410855jixiang_79.jpg","img/tu/2023218125410855jixiang_80.jpg","img/tu/2023218125410855jixiang_81.jpg","img/tu/2023218125410855jixiang_82.jpg","img/tu/2023218125410855jixiang_83.jpg","img/tu/2023218125410855jixiang_84.jpg","img/tu/2023218125410855jixiang_85.jpg","img/tu/2023218125410855jixiang_86.jpg","img/tu/2023218125410855jixiang_87.jpg","img/tu/2023218125410855jixiang_88.jpg","img/tu/2023218125410855jixiang_89.jpg","img/tu/2023218125410855jixiang_90.jpg","img/tu/2023218125410855jixiang_91.jpg","img/tu/2023218125410855jixiang_92.jpg","img/tu/2023218125410855jixiang_93.jpg","img/tu/2023218125410855jixiang_94.jpg","img/tu/2023218125410855jixiang_95.jpg","img/tu/2023218125410855jixiang_96.jpg","img/tu/2023218125410855jixiang_97.jpg","img/tu/2023218125410855jixiang_98.jpg","img/tu/2023218125410855jixiang_99.jpg","img/tu/2023218125410855jixiang_100.jpg"
]
                }
            })

4.创建组件

在组件中插入图片，用v-show来控制图片是否显示，定义一个change方法来改变show，用@click来监听这个事件。

用v-bind简写为：:src="im" src绑定im

<template id="temp"> //组件的名字
    <div class="item" @click="change">
        <img :src="im" v-show="show" />    
    </div>
</template>

5.组件具体是什么

props接收im数据，im在父组件中定义 数据是数组imgs

Vue.component("test-div",{
    template:"#temp",//这个组件具体是什么
    props:["im"],
    data:function(){
    return{
        show:true,                        
                img:"img/tu/2023218125410855jixiang_1.jpg"
        }
    },
        methods:{
            //方法
            change:function(){
                this.show = !this.show
            }
        }
    });        

6.图片放入盒子内

一张一张的放太过于麻烦，用v-for用来循环插入图片

用v-bind简写为： :im="i"  im绑定i在每次循环imgs接收到的值

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

7.css部分

<style>
        .content{
            width: 1040px;
                border: 3px solid palevioletred;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
        }    
        .item{
            height: 100px;
            width: 100px;
            background-color: #DE407E;
            margin: 2px 0px;
        }
        </style>

8.效果展示

 附件链接：

链接: https://pan.baidu.com/s/1nnzadYt7bw9_TLNfQzLROQ?pwd=ufj7 提取码: ufj7 复制这段内容后打开百度网盘手机App，操作更方便哦

 

 

 

标签：10,Vue,自定义,img,tu,jpg,im,组件,2023218125410855jixiang
From： https://www.cnblogs.com/cccoop/p/17230994.html