快捷導(dǎo)航

vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟

更新時(shí)間：2023年11月17日 09:00:06 作者：T?(ˉ?ˉ?)

這篇文章主要給大家介紹了關(guān)于vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟,圖片切換是一個(gè)很經(jīng)典的Vue入門(mén)學(xué)習(xí)案例,在你學(xué)習(xí)完一些基本的v-指令后,你可以嘗試去寫(xiě)一個(gè)簡(jiǎn)單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下

思路

創(chuàng)建一個(gè)數(shù)組，數(shù)組里面放入圖片，利用props（父組件向子組件傳值），v-for（循環(huán)），v-bind（綁定屬性）將圖片傳入HTML定義的div中。

Ⅰ.在頭部導(dǎo)入vue文件（導(dǎo)入前提是vue文件已被引入js中）

<script src="js/vue.js"></script>

Ⅱ.在HTML中創(chuàng)建一個(gè)z-div（可根據(jù)自己喜好命名），用來(lái)接收組件的傳值，用v-for使數(shù)組元素遍歷循環(huán)以此顯示圖片，v-bind綁定im（im定義在script標(biāo)簽中的全局組件中），變量i傳入im中。

<div id="app">
     <z-div v-for="i in img" :im="i"></z-div>
</div>

Ⅲ.定義一個(gè)組件<template>,里面寫(xiě)入需要傳給z-div的數(shù)據(jù)，用v-bind綁定src元素，接受組件的傳值。

<template id="imgs">
    <div id="box" @click="change">
          <img :src="im" alt="" v-show="show">
     </div>
</template>

Ⅳ.在script標(biāo)簽里面定義一個(gè)全局組件（全局組件要在創(chuàng)建Vue實(shí)例之前注冊(cè)），并使用props屬性定義一個(gè)im（數(shù)組中的im是變量通過(guò)屬性綁定，綁定到子組件身上）。

Vue.component( 'z-div', {
                template: '#imgs',
                props: [ 'im' ],
                data: function ()
                {
                    return {
                        show: true
                    }
                },
                methods: {
                    change: function ()
                    {
                        this.show = !this.show
                    }
                }
            } )

Ⅴ.定義一個(gè)新的Vue，并在里面定義一個(gè)數(shù)組，里面放入我們需要的圖片。

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;
            }

效果圖如下

完整代碼

<!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定義循環(huán)，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>

注：如果想要最初圖片不顯示，點(diǎn)擊顯示圖片效果的話，將下圖位置show的值改為false即可