Vue.js点击事件的应用

最新推荐文章于 2024-03-04 09:39:17 发布

梦想大佬程序员

最新推荐文章于 2024-03-04 09:39:17 发布

阅读量605

点赞数 5

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

本文链接：https://blog.csdn.net/m0_73944717/article/details/129681694

版权

该文详细介绍了如何使用Photoshop进行图片切片，然后利用Vue.js和HBuilderX创建一个项目，通过v-for循环展示切割后的图片，并添加点击事件实现图片的显示与隐藏。主要涉及Vue组件、数据绑定和事件处理。

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

一，切割图片

利用ps软件讲目标图片切片

选择切片工具，划分切片为10✖10格式

点击文件，选择导出项中的储存为web格式

将图片改为jpg格式

点击储存为，储存到桌面的一个文件夹中（我这里是images文件夹）

二，vue部分（软件可以用hbuliderx）

打开hbulider新建一个项目（这里名为图片点击事件）

把切割的图片导入到img中

主代码

<body>
        <div id="app">
            <div class="content">
            <Toy v-for="img in imgs" v-bind:im="img"></Toy>    
            <!-- 用一个v-for循环生成，v-bind绑定data中的img// -->
            </div>
            
        </div>
    </body>
    <template id="test1">
        <div class="item"@click="change">
            <!-- /给标签设定一个@click点击事件 -->
        
        <img :src="im" v-show="show" />
        <!-- 利用v-show做一个显示状态 -->
        </div>
    </template>
    <script>
        // // Vue.component("Toy",{
        //     template:"<img src='img/7770_11.jpg'/>"
        // })
        Vue.component("Toy",
        {
            template:"#test1",
            props:["im"],
            data:function(){
                    
                return{
                    show:true,
                    imgSrc:"img/7770_02.gif"
                }
            },
                
            methods:{
                change:function(){
                    this.show =!this.show
                }
            }
        })
        
        var vm = new Vue({
            el:"#app",
            data:{
                imgs:["img/7770_01.jpg","img/7770_02.gif","img/7770_03.gif","img/7770_04.gif","img/7770_05.gif","img/7770_06.gif","img/7770_07.gif","img/7770_08.gif","img/7770_09.gif","img/7770_10.gif","img/7770_11.gif","img/7770_12.gif","img/7770_13.gif","img/7770_14.gif","img/7770_15.gif","img/7770_16.gif","img/7770_17.gif","img/7770_18.gif","img/7770_19.gif","img/7770_20.gif","img/7770_21.gif","img/7770_22.gif","img/7770_23.gif","img/7770_24.gif","img/7770_25.gif","img/7770_26.gif","img/7770_27.gif","img/7770_28.gif","img/7770_29.gif","img/7770_30.gif","img/7770_31.gif","img/7770_32.gif","img/7770_33.gif","img/7770_34.gif","img/7770_35.gif","img/7770_36.gif","img/7770_37.gif","img/7770_38.gif","img/7770_39.gif","img/7770_40.gif","img/7770_41.gif","img/7770_42.gif","img/7770_43.gif","img/7770_44.gif","img/7770_45.gif","img/7770_46.gif","img/7770_47.gif","img/7770_48.gif","img/7770_49.gif","img/7770_50.gif","img/7770_51.gif","img/7770_52.gif","img/7770_53.gif","img/7770_54.gif","img/7770_55.gif","img/7770_56.gif","img/7770_57.gif","img/7770_58.gif","img/7770_59.gif","img/7770_60.gif","img/7770_61.gif","img/7770_62.gif","img/7770_63.gif","img/7770_64.gif","img/7770_65.gif","img/7770_66.gif","img/7770_67.gif","img/7770_68.gif","img/7770_69.gif","img/7770_70.gif","img/7770_71.gif","img/7770_72.gif","img/7770_73.gif","img/7770_74.gif","img/7770_75.gif","img/7770_76.gif","img/7770_77.gif","img/7770_78.gif","img/7770_79.gif","img/7770_80.gif","img/7770_81.gif","img/7770_82.gif","img/7770_83.gif","img/7770_84.gif","img/7770_85.gif","img/7770_86.gif","img/7770_87.gif","img/7770_88.gif","img/7770_89.gif","img/7770_90.gif","img/7770_91.gif","img/7770_92.gif","img/7770_93.gif","img/7770_94.gif","img/7770_95.gif","img/7770_96.gif","img/7770_97.gif","img/7770_98.gif","img/7770_99.gif","img/7770_100.gif"]
            }
        })
        // 实例化，用el唯一根标签使id与实列对象vm绑定
    </script>
</html>

4行用一个v-for属性循环生成，v-bind绑定data中的img，toy标签为自定义，11行用@click定义点击事件，14行用v-show做了一个显示状态。（特别注意的是要引入js文件到项目的js中）

4.css样式部分

<style>
        .content{
            margin: 0 auto;
            width: 1980px;
            border: 1px solid indianred;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
            
        .item{
            margin:5px 0px;
            height:108px;
            width: 193px;
            background-color: red;
        }

样式中特别强调用了一个弹性布局display：flex，用弹性盒模型flex-wrap定义自动换行wrap

justify-content设置了给两端布局space-between，两端对齐且间隔相等。