vue 10*10切片图

非必要不输出

已于 2023-03-27 23:03:46 修改

阅读量178

点赞数

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

于 2023-03-17 23:31:48 首次发布

本文链接：https://blog.csdn.net/m0_67477217/article/details/129629836

版权

1,首先我们使用ps对图片进行切片

2,水平和垂直方向都为10（做的是10*10）

3,点完存储后直接点击保存（注意：切片要是所有切片）

得到一个文件夹

4,在桌面新建一个文件夹，里面添加上HTML的四件套，将刚保存在桌面上的图片文件直接拖入。用VScode打开，写HTML样式。

5,在<script>标签中导入vue.js(没有的可以去官网:Vue.js (vuejs.org) ps:我主要学的是2.0)。

6,在<body>标签中写两个div，给其赋个样式content为最大盒子。这里不给高度，由display标签撑开

justify-content ：在主轴上的对齐方式..... flex-wrap:进行换行操作。

7,自己定义一个组件化，组件化建好，在前面使用我们所定义的组件使用v-for值得绑定

这里得“key="i"”不写可以运行，但会警告！

8,最后创建vue得实例 el:唯一的根标签，用来将页面结构与vue实例对象进行绑定。

9,复制一个图片的名称，在Excel中横拉到“100”。复制到记事本中，每一个名称之间的空格都是一样的距离，选中替换为","即可（注意：","为英文符号）。

效果图：

实现代码

<!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>
    <script src="js/vue.js"></script>
    <style>
        .concent{
            width: 530px;
            border: 1px solid black;
            margin: 0 auto;
            /* 弹性布局 */
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .item{
            height: 38px;
            width: 46px;
            background-color: #ccc;
            margin: 3px 3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="concent">
            <!-- 使用自定义组件 -->
            <test-div v-for = "i in imgs" :im="i" :key="i"></test-div>
        </div>
    </div>
    <template id="tempConcent" >
        <div class="item" @click="change">
            <img :src="im" v-show ="show">

        </div>
    </template>
    <script>
        Vue.component("test-div",{
            template:"#tempConcent",
            props:["im"],
            data:function(){
                return{
                    show:false,
                    img:"images/OIP-C_01.gif"
                }
            },
            methods:{
                change:function(){
                    this.show = !this.show;
                }
            }
        });
        var cm =new Vue({
            el:"#app",
            data:{
                imgs:["images/OIP-C_01.gif","images/OIP-C_02.gif","images/OIP-C_03.gif","images/OIP-C_04.gif","images/OIP-C_05.gif",
                "images/OIP-C_06.gif","images/OIP-C_07.gif","images/OIP-C_08.gif","images/OIP-C_09.gif","images/OIP-C_10.gif",
                "images/OIP-C_11.gif","images/OIP-C_12.gif","images/OIP-C_13.gif","images/OIP-C_14.gif","images/OIP-C_15.gif",
                "images/OIP-C_16.gif","images/OIP-C_17.gif","images/OIP-C_18.gif","images/OIP-C_19.gif","images/OIP-C_20.gif",
                "images/OIP-C_21.gif","images/OIP-C_22.gif","images/OIP-C_23.gif","images/OIP-C_24.gif","images/OIP-C_25.gif",
                "images/OIP-C_26.gif","images/OIP-C_27.gif","images/OIP-C_28.gif","images/OIP-C_29.gif","images/OIP-C_30.gif",
                "images/OIP-C_31.gif","images/OIP-C_32.gif","images/OIP-C_33.gif","images/OIP-C_34.gif","images/OIP-C_35.gif",
                "images/OIP-C_36.gif","images/OIP-C_37.gif","images/OIP-C_38.gif","images/OIP-C_39.gif","images/OIP-C_40.gif",
                "images/OIP-C_41.gif","images/OIP-C_42.gif","images/OIP-C_43.gif","images/OIP-C_44.gif","images/OIP-C_45.gif",
                "images/OIP-C_46.gif","images/OIP-C_47.gif","images/OIP-C_48.gif","images/OIP-C_49.gif","images/OIP-C_50.gif",
                "images/OIP-C_51.gif","images/OIP-C_52.gif","images/OIP-C_53.gif","images/OIP-C_54.gif","images/OIP-C_55.gif",
                "images/OIP-C_56.gif","images/OIP-C_57.gif","images/OIP-C_58.gif","images/OIP-C_59.gif","images/OIP-C_60.gif",
                "images/OIP-C_61.gif","images/OIP-C_62.gif","images/OIP-C_63.gif","images/OIP-C_64.gif","images/OIP-C_65.gif",
                "images/OIP-C_66.gif","images/OIP-C_67.gif","images/OIP-C_68.gif","images/OIP-C_69.gif","images/OIP-C_70.gif",
                "images/OIP-C_71.gif","images/OIP-C_72.gif","images/OIP-C_73.gif","images/OIP-C_74.gif","images/OIP-C_75.gif",
                "images/OIP-C_76.gif","images/OIP-C_77.gif","images/OIP-C_78.gif","images/OIP-C_79.gif","images/OIP-C_80.gif",
                "images/OIP-C_81.gif","images/OIP-C_82.gif","images/OIP-C_83.gif","images/OIP-C_84.gif","images/OIP-C_85.gif",
                "images/OIP-C_86.gif","images/OIP-C_87.gif","images/OIP-C_88.gif","images/OIP-C_89.gif","images/OIP-C_90.gif",
                "images/OIP-C_91.gif","images/OIP-C_92.gif","images/OIP-C_93.gif","images/OIP-C_94.gif","images/OIP-C_95.gif",
                "images/OIP-C_96.gif","images/OIP-C_97.gif","images/OIP-C_98.gif","images/OIP-C_99.gif","images/OIP-C_100.gif"]
            }
        })
    </script>
</body>
</html>

希望我们都能好好爱自己！！！！！