vue Instruction System - FIG Carousel

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue轮播图</title>
    <!-- <script src="./js/jquery-3.4.1.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        img{
            height: 500px;
        }
        li{
            width:50px;
            height: 50px;
            background-color: brown;
            text-align: center;
            line-height: 50px;
            list-style: none;
            display: inline-block;
        }
        {li.active 
            background-Color: CadetBlue; 
        } 
    </ style> 
</ head> 
<body> 
    <div ID = 'lunbo'> 
        <IMG Alt = "FIG rotation" the bind-V: the src = 'IMGSRC'> 
        < UL> 
            <-V for Li = '(Item, index) in imgs' V-ON: the Click = 'changeIndex (index)' the bind-V: class = '{Active: the currentIndex index ===}'> {{index }} + 1'd </ Li> 
            <-! array traversal, if only to take index, can not be written 'index in imgs', in front of only one parameter, refers to an array of elements instead of the subscript, not the name was confused! ! -> 
        </ UL> 
    </ div> 
    <Script> 
        new new Vue ({ 
            EL: '# lunbo',
                    imgs: [ './ Image / skin1.jpg',,, '/ Image / skin2.jpg.' '/ Image / skin3.jpg.' '/ Image / skin4.jpg.'],
                    the currentIndex: 0, 
                    IMGSRC: './ Image / skin1.jpg', 
                    // data modification in the method, the changes to the data in the data does not work 
                    // IMGSRC: this.imgs [this.currentIndex] 
                } 
            }, 
            Methods: { 
                changeIndex (index) { 
                    this.currentIndex = index; 
                    this.imgSrc = this.imgs [this.currentIndex]; 
                } 
            } 
        }); 
    </ Script> 
</ body> 
</ HTML>
vue Instruction System - FIG Carousel

Guess you like
