快捷導(dǎo)航

基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)詳解

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

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

下面是是對(duì)Vue3操作的一個(gè)項(xiàng)目實(shí)戰(zhàn)

下面代碼是html的基本骨架（沒(méi)有任何的功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相冊(cè)</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實(shí)現(xiàn)的相冊(cè)：展示第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>

運(yùn)行結(jié)果：

接下來(lái)我們將添加代碼使其變成一個(gè)小相冊(cè)，運(yùn)行結(jié)果如下圖：

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

【實(shí)現(xiàn)思路】

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相冊(cè)</title>
    <style>
        .clear_ele::after{
            content: "";  /* 這個(gè)偽元素的內(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實(shí)現(xiàn)的相冊(cè)：展示第{{ 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>

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

下述代碼的弊端就是比較冗長(zhǎng)，相對(duì)于上一種方法會(huì)消耗更長(zhǎng)時(shí)間，因?yàn)樗前衙恳粡堈掌氖褂媒Y(jié)果一一敲出來(lái)的，可與上面代碼比對(duì)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相冊(cè)</title>
    <style>
        .clear_ele::after{
            content: "";  /* 這個(gè)偽元素的內(nèi)容屬性必須有 */
            display: block;
            clear: both;  /* 忽略前面盒子浮動(dòng)帶來(lái)的影響，解決父盒高度塌陷問(wèn)題 */
        }
        .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實(shí)現(xiàn)的相冊(cè)：展示第{{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(`用戶點(diǎn)擊第${img.index}張按鈕，顯示第${img.index}張照片`);
                }
                const show_2_img = () => {
                    img.index = 2
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用戶點(diǎn)擊第${img.index}張按鈕，顯示第${img.index}張照片`);
                }
                const show_3_img = () => {
                    img.index = 3
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用戶點(diǎn)擊第${img.index}張按鈕，顯示第${img.index}張照片`);
                }
                const show_4_img = () => {
                    img.index = 4
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用戶點(diǎn)擊第${img.index}張按鈕，顯示第${img.index}張照片`);
                }            
                const pre = () => {
                    img.index = img.index - 1
                    if(img.index < 1 ){
                        img.index = 4
                    }
                    // 把圖片路徑存儲(chǔ)在響應(yīng)式數(shù)據(jù)里，當(dāng)這個(gè)響應(yīng)式數(shù)據(jù)改變時(shí)，html的圖片路徑就會(huì)自動(dòng)改變
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用戶點(diǎn)擊了上一張按鈕，顯示第${img.index}張照片`);
                }
                const next = () => {
                    img.index = img.index + 1
                    if(img.index > 4 ){  // 圖片展示完了，回到第一張
                        img.index = 1
                    }
                    // 把圖片路徑存儲(chǔ)在響應(yīng)式數(shù)據(jù)里，當(dāng)這個(gè)響應(yīng)式數(shù)據(jù)改變時(shí)，html的圖片路徑就會(huì)自動(dòng)改變
                    img.url = `./img_src/logo${img.index}.png`
                    console.log(`用戶點(diǎn)擊了下一張按鈕，顯示第${img.index}張照片`);
                }              
                return { img,
                    show_1_img,
                    show_2_img,
                    show_3_img,
                    show_4_img,
                    pre, next }   //把數(shù)據(jù)（屬性）， 函數(shù)（方法）暴露出來(lái)，供HTML模板調(diào)用
            }
        }).mount("#app")
    </script>
</body>
</html>

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

您可能感興趣的文章: