快捷導(dǎo)航

基于Vue3實現(xiàn)一個小相冊詳解

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

這篇文章主要為大家詳細介紹了如何基于Vue3實現(xiàn)一個小相冊效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

下面是是對Vue3操作的一個項目實戰(zhàn)

下面代碼是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實現(xiàn)的相冊：展示第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>

運行結(jié)果：

接下來我們將添加代碼使其變成一個小相冊，運行結(jié)果如下圖：

我們可以點擊上一張或下一張來實現(xiàn)圖片的跳轉(zhuǎn)，也可以使用按鈕1234來實現(xiàn)你想跳轉(zhuǎn)的張數(shù)

【實現(xiàn)思路】

1. 利用v-on為切換相片的按鈕綁定上一個函數(shù)，這個函數(shù)負責(zé)更改圖片路徑

2. 利用v-bind綁定圖片的路徑，使得圖片路徑可以自動更新

以下是實現(xiàn)相冊的完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相冊</title>
    <style>
        .clear_ele::after{
            content: "";  /* 這個偽元素的內(nèi)容屬性必須有 */
            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實現(xiàn)的相冊：展示第{{ 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() {
                // 【定義數(shù)據(jù)】
                const img = reactive(
                    {
                        number: 1,
                        url: "./img_src/logo1.png"
                    }
                )
                // 【定義函數(shù)】
                //上一張
                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`
                }
                //跳轉(zhuǎn)
                const jump = (val) => {
                    img.number = val
                    img.url = `./img_src/logo${img.number}.png`
                }
                return {img, prev,next,jump}
            }
        }).mount("#app")
    </script>
</body>
</html>

還有另一種方法也同樣可以實現(xiàn)相冊的效果，代碼如下：

下述代碼的弊端就是比較冗長，相對于上一種方法會消耗更長時間，因為它是把每一張照片的使用結(jié)果一一敲出來的，可與上面代碼比對

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相冊</title>
    <style>
        .clear_ele::after{
            content: "";  /* 這個偽元素的內(nèi)容屬性必須有 */
            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實現(xiàn)的相冊：展示第{{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
                    }
                    // 把圖片路徑存儲在響應(yīng)式數(shù)據(jù)里，當(dāng)這個響應(yīng)式數(shù)據(jù)改變時，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
                    }
                    // 把圖片路徑存儲在響應(yīng)式數(shù)據(jù)里，當(dāng)這個響應(yīng)式數(shù)據(jù)改變時，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 }   //把數(shù)據(jù)（屬性）， 函數(shù)（方法）暴露出來，供HTML模板調(diào)用
            }
        }).mount("#app")
    </script>
</body>
</html>

到此這篇關(guān)于基于Vue3實現(xiàn)一個小相冊詳解的文章就介紹到這了,更多相關(guān)Vue3相冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: