脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue点击切换图片效果

vue制作点击切换图片效果的详细思路与步骤

 更新时间：2023年11月17日 09:00:06   作者：Tԅ(¯ㅂ¯ԅ)  
这篇文章主要给大家介绍了关于vue制作点击切换图片效果的详细思路与步骤,图片切换是一个很经典的Vue入门学习案例,在你学习完一些基本的v-指令后,你可以尝试去写一个简单的demo去巩固和熟悉这些指令的使用方法,需要的朋友可以参考下

思路

创建一个数组，数组里面放入图片，利用props（父组件向子组件传值），v-for（循环），v-bind（绑定属性）将图片传入HTML定义的div中。

Ⅰ.在头部导入vue文件（导入前提是vue文件已被引入js中）

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

Ⅱ.在HTML中创建一个z-div（可根据自己喜好命名），用来接收组件的传值，用v-for使数组元素遍历循环以此显示图片，v-bind绑定im（im定义在script标签中的全局组件中），变量i传入im中。

<div id="app">
     <z-div v-for="i in img" :im="i"></z-div>
</div>

Ⅲ.定义一个组件<template>,里面写入需要传给z-div的数据，用v-bind绑定src元素，接受组件的传值。

<template id="imgs">
    <div id="box" @click="change">
          <img :src="im" alt="" v-show="show">
     </div>
</template>

Ⅳ.在script标签里面定义一个全局组件（全局组件要在创建Vue实例之前注册），并使用props属性定义一个im（数组中的im是变量通过属性绑定，绑定到子组件身上）。

Vue.component( 'z-div', {
                template: '#imgs',
                props: [ 'im' ],
                data: function ()
                {
                    return {
                        show: true
                    }
                },
                methods: {
                    change: function ()
                    {
                        this.show = !this.show
                    }
                }
            } )

Ⅴ.定义一个新的Vue，并在里面定义一个数组，里面放入我们需要的图片。

var vm = new Vue( {
                el: '#app',
                data: {
                    img: [
                        'img/222_01.jpg',
                        'img/222_02.jpg',
                        'img/222_03.jpg',
                        'img/222_04.jpg',
                        'img/222_05.jpg',
                        'img/222_06.jpg',
                        'img/222_07.jpg',
                        'img/222_08.jpg',
                        'img/222_09.jpg',
                        'img/222_10.jpg',
                        'img/222_11.jpg',
                        'img/222_12.jpg',
                        'img/222_13.jpg',
                        'img/222_14.jpg',
                        'img/222_15.jpg',
                        'img/222_16.jpg',
                        'img/222_17.jpg',
                        'img/222_18.jpg',
                        'img/222_19.jpg',
                        'img/222_20.jpg',
                        'img/222_21.jpg',
                        'img/222_22.jpg',
                        'img/222_23.jpg',
                        'img/222_24.jpg',
                        'img/222_25.jpg'
                    ]
                }
            } )

Ⅵ.编辑样式

 * {
                margin: 0;
                padding: 0;
            }
 
            #app {
                width: 550px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
 
            img {
                width: 108px;
                height: 138px;
            }
 
            #box {
                width: 108px;
                height: 138px;
                background-color: pink;
                margin: 1px 0px;
            }

效果图如下

完整代码

<!DOCTYPE html>
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        //    引入vue
        <script src="js/vue.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            #app {
                width: 550px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
 
            img {
                width: 108px;
                height: 138px;
            }
 
            #box {
                width: 108px;
                height: 138px;
                background-color: pink;
                margin: 1px 0px;
            }
        </style>
    </head>
 
    <body>
        <div id="app">
            //v-for定义循环，v-bind绑定属性
            <z-div v-for="i in img" :im="i"></z-div>
        </div>
        <template id="imgs">
            <div id="box" @click="change">
                <img :src="im" alt="" v-show="show">
            </div>
        </template>
        <script>
            Vue.component( 'z-div', {
                template: '#imgs',
            //父组件向子组件传值
                props: [ 'im' ],
                data: function ()
                {
                    return {
                        show: true
                    }
                },
                methods: {
                    change: function ()
                    {
                        this.show = !this.show
                    }
                }
            } )
            var vm = new Vue( {
                el: '#app',
                data: {
                    img: [
                        'img/222_01.jpg',
                        'img/222_02.jpg',
                        'img/222_03.jpg',
                        'img/222_04.jpg',
                        'img/222_05.jpg',
                        'img/222_06.jpg',
                        'img/222_07.jpg',
                        'img/222_08.jpg',
                        'img/222_09.jpg',
                        'img/222_10.jpg',
                        'img/222_11.jpg',
                        'img/222_12.jpg',
                        'img/222_13.jpg',
                        'img/222_14.jpg',
                        'img/222_15.jpg',
                        'img/222_16.jpg',
                        'img/222_17.jpg',
                        'img/222_18.jpg',
                        'img/222_19.jpg',
                        'img/222_20.jpg',
                        'img/222_21.jpg',
                        'img/222_22.jpg',
                        'img/222_23.jpg',
                        'img/222_24.jpg',
                        'img/222_25.jpg'
                    ]
                }
            } )
        </script>
    </body>
 
</html>

注：如果想要最初图片不显示，点击显示图片效果的话，将下图位置show的值改为false即可

总结

到此这篇关于vue制作点击切换图片效果的文章就介绍到这了,更多相关vue点击切换图片效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue.js中v-for指令的用法介绍

    Vue.js中v-for指令的用法介绍

    这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • 搭建vue开发环境

    搭建vue开发环境

    这篇文章主要介绍了搭建vue开发环境的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue组件data函数的具体使用

    Vue组件data函数的具体使用

    在Vue组件中,data函数用于定义组件的数据,本文主要介绍了Vue组件data函数的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • vue如何通过src引用assets中的图片

    vue如何通过src引用assets中的图片

    这篇文章主要介绍了vue如何通过src引用assets中的图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • electron+vue 实现静默打印功能

    electron+vue 实现静默打印功能

    这篇文章主要介绍了electron+vue 实现静默打印功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • JavaScript实现简单的图片切换功能(实例代码)

    JavaScript实现简单的图片切换功能(实例代码)

    这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-04-04
  • Vue中挂载全局的方法详解

    Vue中挂载全局的方法详解

    有时候,频繁调用的函数,我们需要把它挂载在全局的vue原型上,方便调用,这篇文章主要为大家详细介绍了Vue中挂载全局的具体操作,需要的可以参考下
    2024-03-03
  • Vue路由跳转的5种方式及扩展

    Vue路由跳转的5种方式及扩展

    这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下
    2023-11-11
  • 在vue框架下使用指令vue add element安装element报错问题

    在vue框架下使用指令vue add element安装element报错问题

    这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3项目中预览并打印PDF的两种方法

    Vue3项目中预览并打印PDF的两种方法

    最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05

最新评论