vue制作点击切换图片效果

这篇具有很好参考价值的文章主要介绍了vue制作点击切换图片效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

思路

创建一个数组,数组里面放入图片,利用props(父组件向子组件传值),v-for(循环),v-bind(绑定属性)将图片传入HTML定义的div中。文章来源地址https://www.toymoban.com/news/detail-738119.html

Ⅰ.在头部导入vue文件(导入前提是vue文件已被引入js中)
vue中实现简单切换图片效果,vue.js,前端,Powered by 金山文档
<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;
            }

效果图如下

vue中实现简单切换图片效果,vue.js,前端,Powered by 金山文档
vue中实现简单切换图片效果,vue.js,前端,Powered by 金山文档

完整代码

<!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.js,前端,Powered by 金山文档

到了这里,关于vue制作点击切换图片效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中实现图片懒加载简单说明

    npm i vue-lazyload@1.2.6 import VueLazyload from \\\"vue-lazyload\\\"; 说明:main.js文件 说明:vue文件    

    2024年02月13日
    浏览(39)
  • 基于html+js实现轮播图(自动轮播、左右按钮、小圆点点击及切换图片)

    使用html和js实现的一个简单小练习轮播图。大概功能主要是: 1、使用时间函数自动切换图片; 2、在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型,让鼠标移入,图片暂停,移出,图片恢复轮播; 3、在按钮的父节点身上绑定事件代理,事

    2024年02月11日
    浏览(44)
  • vue点击单张图片放大(纯js)

    vue点击单张图片放大 点击图片以后-》 在 vue 项目中,实现点击图片放大功能可以使用图片预览组件,如 vue-preview,或者使用 JavaScript 编写放大预览的代码。 步骤如下: 在 HTML 中加入图片元素,并给其绑定 click 事件。 在 vue 组件的 methods 选项中,定义图片点击事件的回调函

    2024年02月12日
    浏览(57)
  • 前端vue点击图片上传(带封装方法)

    直接用,图片路径自己换一下 封装组件upload.vue 直接用,图片路径自己换一下 使用组件 引入上面upload.vue

    2024年02月09日
    浏览(46)
  • 记录-JS简单实现购物车图片局部放大预览效果

    代码不多,先看一下 HTML 里面结构很简单,初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。 再看一下 MagnifyingGlass 上面的就是全部逻辑,实现方法肯定不是最优的,但是其中可以联想到通过像素点的操作实现任意效果。 可以启动一个 node 本地服务,首先见一个

    2023年04月20日
    浏览(81)
  • vue2+three.js+blender(实现3d 模型引入并可点击效果)

    2023.9.13今天我学习了如何把3d建模里面的模型引入到vue中,并可以实现拖动,点击的效果: 首先安装: npm install three 相关代码如下:  如果没有图片可以去 Three.js--》建模软件如何加载外部3D模型?_threejs加载3d模型_亦世凡华、的博客-CSDN博客

    2024年02月03日
    浏览(64)
  • 前端小技巧:学会通过CSS Hover和JS实现图片放大镜效果

    数据来源: ChatGPT 今天,我们来看一个鼠标悬停出现图片放大镜效果,这是一个比较实用且炫酷的纯CSS和JS实现的页面效果。 HTML HTML代码非常简单,我们只需要一个div容器,内部嵌入一张图片,再添加一个用来显示放大镜的div元素。 CSS CSS代码是实现放大镜效果的重要部分,

    2024年02月02日
    浏览(73)
  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

    前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:           #### 使用方法 ```使用方法 swiperTabList: [\\\"2023-06-10\\\",\\\"2023-06-11\\\",\\\"2023-06-12\\\",\\\"2023-06-13\\\",\\\"2023-06-14\\\",\\\"2023-06-15\\\"], //导航列表 swiperTabIdx:

    2024年02月08日
    浏览(46)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(59)
  • css如何实现点击切换效果

    1.在你要放一组的html标签中加入 tabindex标记 2.css中使用focus点击后样式更改 效果 如此便可简单实现点击切换样式效果

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包