基于Vue3实现一个小相册详解

更新时间：2024年12月02日 09:16:39 作者：出逃日志

这篇文章主要为大家详细介绍了如何基于Vue3实现一个小相册效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

下面是是对Vue3操作的一个项目实战

下面代码是html的基本骨架（没有任何的功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <style>
        .box{
            margin-bottom: 20px;
            padding: 0;
        }
        .img{
            width: 480px;  
            height: 240px;
            border: 1px bisque solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>基于Vue3实现的相册：展示第xx张相片</h2>      
        <img src = "./img_src/logo1.png" class="img" alt="图片加载失败">
        <ul type="none" class="box"></ul>       
        <button>上一张</button>   <button>下一张</button>
    </div>
    <script type="module">
        import { createApp, ref } from './vue.esm-browser.js'
    </script>
</body>
</html>

运行结果：

接下来我们将添加代码使其变成一个小相册，运行结果如下图：

我们可以点击上一张或下一张来实现图片的跳转，也可以使用按钮1234来实现你想跳转的张数

【实现思路】

1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径

2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新

以下是实现相册的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <style>
        .clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block;
            clear: both;
        }
        .box{
            margin-bottom: 20px;
            padding: 0;
        }
        .button{
            background-color: bisque;
            width: 20px;
            float: left;  
            text-align: center;
            margin-right: 10px;
            border-radius: 8px;
            cursor: pointer;  
        }
        .img{
            width: 480px;  
            height: 240px;
            border: 1px bisque solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>       
        <img v-bind:src="img.url"   class="img">
        <ul type="none" class="clear_ele box">
            <li v-for="(val, idx) in 4"  @click="jump(val)" class="button"> {{val}} </li>
        </ul>
        <button @click="prev">上一张</button>     <button @click="next">下一张</button>
    </div>
    <script type="module">
        import { createApp,  ref,  reactive } from './vue.esm-browser.js'
        createApp({
            setup() {
                // 【定义数据】
                const img = reactive(
                    {
                        number: 1,
                        url: "./img_src/logo1.png"
                    }
                )
                // 【定义函数】
                //上一张
                const prev = () => {
                    img.number--
                    if (img.number == 0) {
                        img.number = 4
                    }
                    img.url = `./img_src/logo${img.number}.png`                
                }        
                //下一张
                const next = () => {
                    img.number++
                    if (img.number == 5) {
                        img.number = 1
                    }
                    img.url = `./img_src/logo${img.number}.png`
                }
                //跳转
                const jump = (val) => {
                    img.number = val
                    img.url = `./img_src/logo${img.number}.png`
                }
                return {img, prev,next,jump}
            }
        }).mount("#app")
    </script>
</body>
</html>

还有另一种方法也同样可以实现相册的效果，代码如下：

下述代码的弊端就是比较冗长，相对于上一种方法会消耗更长时间，因为它是把每一张照片的使用结果一一敲出来的，可与上面代码比对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <style>
        .clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block;
            clear: both;  /* 忽略前面盒子浮动带来的影响，解决父盒高度塌陷问题 */
        }
        .button{
            background-color: bisque;
            width: 20px;
            float: left;  
            text-align: center;
            margin-right: 10px;
            border-radius: 8px;
            cursor: pointer;  
        }
        .img{
            width: 480px;  
            height: 240px;
            border: 1px bisque solid;
        }
        .box{
            margin-bottom: 20px;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>基于Vue3实现的相册：展示第{{img.index}}张相片</h2>       
        <img v-bind:src= "img.url" class="img" alt="图片加载失败">
        <ul type="none" class="box clear_ele">
            <li class="button" v-on:click = "show_1_img">1</li>
            <li class="button" v-on:click = "show_2_img">2</li>
            <li class="button" v-on:click = "show_3_img">3</li>
            <li class="button" v-on:click = "show_4_img">4</li>
        </ul>     
        <button v-on:click = "pre">上一张</button>  
        <button v-on:click = "next">下一张</button>
    </div>
    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
            setup() {
                const img = reactive(
                    {
                      index: 1,
                      url:  "./img_src/logo1.png",  //图片路径
                    }  
                )
                const show_1_img = () => {
                    img.index = 1
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
                }
                const show_2_img = () => {
                    img.index = 2
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
                }
                const show_3_img = () => {
                    img.index = 3
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
                }
                const show_4_img = () => {
                    img.index = 4
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
                }            
                const pre = () => {
                    img.index = img.index - 1
                    if(img.index < 1 ){
                        img.index = 4
                    }
                    // 把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击了上一张按钮，显示第${img.index}张照片`);
                }
                const next = () => {
                    img.index = img.index + 1
                    if(img.index > 4 ){  // 图片展示完了，回到第一张
                        img.index = 1
                    }
                    // 把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用户点击了下一张按钮，显示第${img.index}张照片`);
                }              
                return { img,
                    show_1_img,
                    show_2_img,
                    show_3_img,
                    show_4_img,
                    pre, next }   //把数据（属性）， 函数（方法）暴露出来，供HTML模板调用
            }
        }).mount("#app")
    </script>
</body>
</html>

到此这篇关于基于Vue3实现一个小相册详解的文章就介绍到这了,更多相关Vue3相册内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3
相册

Vue状态管理工具Pinia的安装与使用教程
这篇文章主要介绍了Vue状态管理工具Pinia的安装与使用,一步一步学习如何将pinia运用到项目实战中去,文中有详细的安装教程和使用方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-03-03
vue父子组件slot插槽的使用
这篇文章主要介绍了vue父子组件slot插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
ubuntu中利用nginx部署vue项目的完整步骤
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器,在BSD-like 协议下发行,下面这篇文章主要给大家介绍了关于ubuntu中利用nginx部署vue项目的相关资料,需要的朋友可以参考下
2022-02-02
关于vant折叠面板默认展开问题
这篇文章主要介绍了关于vant折叠面板默认展开问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
ElementPlus Table表格实现可编辑单元格
本文主要介绍了ElementPlus Table表格实现可编辑单元格,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-12-12
vue中用qrcode库将超链接生成二维码图片的示例代码
生成二维码是一种常见的需求,无论是用于商业宣传还是个人分享,二维码都可以提供快速方便的方式来传递信息,在Vue框架中,我们可以使用qrcode库来轻松地生成二维码,本篇博文将介绍如何安装qrcode库,并通过一个实际例子来展示如何生成二维码,需要的朋友可以参考下
2023-12-12
Vue折叠面板组件的封装
这篇文章主要为大家详细介绍了Vue折叠面板组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue之表单事件数据绑定详解
这篇文章主要为大家介绍了Vue之表单事件的数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助
2021-11-11
使用Vue快速实现一个无缝轮播效果
这篇文章主要为大家详细介绍了如何使用Vue快速实现一个无缝轮播效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
2024-04-04
vue实现zip文件下载
这篇文章主要为大家详细介绍了vue实现zip文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08

基于Vue3实现一个小相册详解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具