您的位置：首页 > 编程学习 > > 正文

vue移动端图片放大效果实现（vue实现图片切换效果）

更多时间：2021-10-22 07:20:03 类别：编程学习浏览量：2145

vue移动端图片放大效果实现

vue实现图片切换效果

本文实例为大家分享了vue实现图片切换效果的具体代码，供大家参考，具体内容如下

1）v-if/v-show

二者都可以实现让元素隐藏和显示。但是实现原理不同：
v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。
v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。

2）v-bind

v-bind可以对元素的属性值进行修改。
基于这些背景知识，下面来实现图片切换实例。

功能需求

1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮
2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮

vue移动端图片放大效果实现（vue实现图片切换效果）

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片切换效果</title>
        <style>
            #test{
                position: absolute;
            }
            #left{
                position: absolute;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                color: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            #right{
                position: absolute;
                right: 0;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                color: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            img{
                width: 500px;
                height: 300px;
                
            }
            
        </style>
    </head>
    <body>
        <li id="test" >
            <li id="left" @click = "changeleft" v-if="lefttt">  &lt; </li>
            <img v-bind:src = "'imgs/00'+num+'.jpg" alt="vue移动端图片放大效果实现（vue实现图片切换效果）" border="0" />