Sistema de Instrucción vue - la figura Carousel

<html lang = "en"> 
<head> 
    <meta charset = "UTF-8"> 
    <meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 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 { 
            altura: 500px; 
        } 
        Li { 
            anchura: 50px; 
            altura: 50px; 
            background-color: marrón; 
            text-align: center; 
            line-height: 50px; 
            list-style: none; 
            mostrar: inline-block; 
        }
        li.active { 
            fondo-Color: CadetBlue; 
        } 
    </ style> 
</ head> 
<body> 
    <div ID = 'lunbo'> 
        <IMG Alt = "rotación figura" el bind-V: la src = 'IMGSRC'> 
        < UL> 
            <-V para Li = '(Tema, index) en imgs' V-ON: Click = 'changeIndex (índice)' el bind-V: class = '{activo: el índice currentIndex ===}'> {{index }} hecho +1 </ Li> 
            <! - array traversal, aunque sólo sea para tomar índice, no se puede escribir 'índice en imgs', frente a sólo un parámetro, se refiere a una disposición de elementos en lugar del subíndice, no el nombre fue confundido! ! -> 
        </ ul> 
    </ div> 
    <script> 
        nueva nueva Vue ({ 
            EL: '# lunbo',
                    IMG: [ './ imagen / skin1.jpg' ,,, '/ Imagen / skin2.jpg.' '/ Imagen / skin3.jpg'. '/ Imagen / skin4.jpg.'], 
                    el currentIndex: 0, 
                    IMGSRC: './image/skin1.jpg', 
                    // de modificación de datos en el método, los datos en los cambios de datos no 
                    // IMGSRC: this.imgs [this.currentIndex] 
                } 
            }, 
            métodos: { 
                changeIndex (índice ) { 
                    this.currentIndex = índice; 
                    this.imgSrc = this.imgs [this.currentIndex]; 
                } 
            } 
        }); 
    </ script> 
</ body> 
</ HTML>
Sistema de Instrucción vue - la figura Carousel

Supongo que te gusta
