vue框架学习-笔记2

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul{
        list-style: none
    }
    .lunbo{
        height: 400px;
        width: 400px;
    }
    .lunbo ul li{
        float: left;
        width: 30px;
        height: 30px;
        background-color: darkred;
        color: white;
        line-height: 30px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="app">
        {{time}}
        <div class="lunbo">
            <img :src="currentSrc" alt="">
            <ul>
                <li v-for="(item,i) in imgArr" @click='currentHandler(item)'>{{i+1}}</li>
            </ul>
        </div>
        <button @click="nextImg">下一张</button>
    </div>

<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"hello world!",
            currentSrc:"./img/1.jpg",
            time:`页面加载于${new Date().toLocaleString()}`,
            imgArr:[
                {id:1,scr:"./img/1.jpg"},
                {id:2,scr:"./img/2.jpg"},
                {id:3,scr:"./img/3.jpg"},
                {id:4,scr:"./img/4.jpg"}
            ],
            currentIndex:0,
        },
        methods:{
            currentHandler(item){
                this.currentSrc=item.scr;   
            },
            nextImg(){
                if(this.currentIndex==this.imgArr.length-1){
                    this.currentIndex=-1;
                }
                this.currentIndex++;
                //console.log(this.currentIndex);
                this.currentSrc=this.imgArr[this.currentIndex].scr;
            }
        }
    })
</script>
</body>
</html>

 

posted @ 2019-01-24 10:19  巨兽~墨菲特  阅读(127)  评论(0)    收藏  举报