vue作业

Uno.295

已于 2023-03-29 09:55:03 修改

阅读量151

点赞数

文章标签： html 前端 Powered by 金山文档

于 2023-03-22 01:08:14 首次发布

本文链接：https://blog.csdn.net/qq_71019196/article/details/129690728

版权

该文详细介绍了如何使用Photoshop将素材切片为10*10的图片，并存储为Web格式。接着，通过Vue.js框架构建一个网页，设置弹性布局使图片水平均匀分布并可换行，每个图片元素包含点击事件以切换显示状态。文章还提供了源代码示例，展示了如何导入图片并在点击时隐藏或显示。

摘要由CSDN通过智能技术生成

一.素材处理

使用ps将素材切片为10*10图片

将图片导出，存储为web格式

二.框架

引入vue文件

2.设置一个大盒子，容纳所有的图片，设置为弹性布局，图片水平方向均匀放置，溢出换行。

3.使用标签创建一个模板，在装着图片的盒子上面设置点击事件。在图片上设置v-show来隐藏图片。

4.导入图片,将对象实例化。

5.设置页面背景颜色，盒子宽高，图片隐藏后颜色

三.效果实现

四.源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            border: 5px solid rgb(245, 238, 238);
            width: 1700px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }    
        
        img {
            width: 160px;
            height: 107px;
        }
        
        .item {
            width: 160px;
            margin: 5px 0;
            background-color: rgb(238, 235, 69);
            height: 107px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <cpn v-for="item in image" :im="item"></cpn>
        </div>
    </div>
    <template id="testimg">
        <div class="item" @click="btn">
            <img :src="im" v-show="show">
        </div>
  </template>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component("cpn",{
        template:"#testimg",
        props:["im"],
        
        data:function(){
            return{
                show:true
            }
        },
        methods:{
            btn(){
                this.show = !this.show
            }
        }
    })

    var vm = new Vue({
        el:"#app",
        data:{
            
               image:['images/3_01.jpg','images/3_02.jpg','images/3_03.jpg','images/3_04.jpg','images/3_05.jpg','images/3_06.jpg','images/3_07.jpg','images/3_08.jpg','images/3_09.jpg','images/3_10.jpg','images/3_11.jpg','images/3_12.jpg','images/3_13.jpg','images/3_14.jpg','images/3_15.jpg','images/3_16.jpg','images/3_17.jpg','images/3_18.jpg','images/3_19.jpg','images/3_20.jpg','images/3_21.jpg','images/3_22.jpg','images/3_23.jpg','images/3_24.jpg','images/3_25.jpg','images/3_26.jpg','images/3_27.jpg','images/3_28.jpg','images/3_29.jpg','images/3_30.jpg','images/3_31.jpg','images/3_32.jpg','images/3_33.jpg','images/3_34.jpg','images/3_35.jpg','images/3_36.jpg','images/3_37.jpg','images/3_38.jpg','images/3_39.jpg','images/3_40.jpg','images/3_41.jpg','images/3_42.jpg','images/3_43.jpg','images/3_44.jpg','images/3_45.jpg','images/3_46.jpg','images/3_47.jpg','images/3_48.jpg','images/3_49.jpg','images/3_50.jpg','images/3_51.jpg','images/3_52.jpg','images/3_53.jpg','images/3_54.jpg','images/3_55.jpg','images/3_56.jpg','images/3_57.jpg','images/3_58.jpg','images/3_59.jpg','images/3_60.jpg','images/3_61.jpg','images/3_62.jpg','images/3_63.jpg','images/3_64.jpg','images/3_65.jpg','images/3_66.jpg','images/3_67.jpg','images/3_68.jpg','images/3_69.jpg','images/3_70.jpg','images/3_71.jpg','images/3_72.jpg','images/3_73.jpg','images/3_74.jpg','images/3_75.jpg','images/3_76.jpg','images/3_77.jpg','images/3_78.jpg','images/3_79.jpg','images/3_80.jpg','images/3_81.jpg','images/3_82.jpg','images/3_83.jpg','images/3_84.jpg','images/3_85.jpg','images/3_86.jpg','images/3_87.jpg','images/3_88.jpg','images/3_89.jpg','images/3_90.jpg','images/3_91.jpg','images/3_92.jpg','images/3_93.jpg','images/3_94.jpg','images/3_95.jpg','images/3_96.jpg','images/3_97.jpg','images/3_98.jpg','images/3_99.jpg','images/3_100.jpg'],
            
        },
    })
</script>

</html>