Vue 例子

一、简单音乐播放器

<!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>
</head>
<body>
    <div id="music">
        <audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio>
        <ul>
            <li v-for="(item, index) in musicArr" @click="clickHandler(item)">
                <h4>歌名: {{item.name}}</h4>
                <p>作者：{{item.author}}</p>
                <hr>
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var songs = [
            {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
            {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
            {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
            {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
        ]
        var mu = new Vue({
            el: "#music",
            data: {
                musicArr: songs,
                currentSrc: "./audios/1.mp3",
                currentIndex: 0,

            },
            methods:{
                clickHandler(item){
                    this.currentSrc = item.src;
                },
                nextSongs(){
                    this.currentIndex += 1;
                    this.currentSrc = this.musicArr[this.currentIndex].src;
                    console.log(this.currentSrc)
                } 
            },
            computed:{},
        })
    </script>
</body>
</html>

二、轮播图

 

<!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>Vue指令</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            background-color: brown;
        }
        .c2 {
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        ul {
            width: 120px;
            overflow: hidden;
        }
        ul li {
            list-style-type: none;
            float: left;
            margin-left: 20px;
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if = 'show'>Hello World</div>
        <button v-on:click = 'clickHandler'>切换</button>
        <h2 v-show="isShow">嘿嘿嘿</h2>
        <div v-if="type=='A'">
            A
        </div>
        <div v-else-if="type=='B'">
            B
        </div>
        <div v-else-if="type=='C'">
            C
        </div>
        <div v-else>
            other
        </div>
        <!-- <img src="./images/1.jpg" alt="" v-bind:title="title"> -->
        <img v-bind:src="imgSrc" v-bind:alt="alt" v-bind:title="title">
        <div class="c1" v-bind:class="{c2: isBlue}"></div>
        <button v-on:click="changeColor">切换颜色</button>
        <div>
            <img v-bind:src="currentSrc" alt="" @mouseenter="closeTimer" @mouseleave="startTimer">
            <ul>
                <li v-for="(item, index) in imgArr" @click="clickImg(item)">{{index+1}}</li>
            </ul>
        </div>
        <button @click="nextImg">下一张</button>
        <div v-html='s'>
            
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        currentTime = new Date().toLocaleString();
        var app = new Vue({
            el: '#app',
            data: {
                name: "tom",
                age: 24,
                show: false,
                type: 'B',
                isShow: false,
                imgSrc: "./images/1.jpg",
                title: '老婆',
                // 模板字符串
                alt: `加载时间${currentTime}`,
                isBlue: false,
                imgArr: [
                    {id:1, src: "./images/1.jpg"},
                    {id:2, src: "./images/2.jpg"},
                    {id:3, src: "./images/3.jpg"},
                    {id:4, src: "./images/4.jpg"},
                ],
                currentSrc: "./images/1.jpg",
                currentIndex: 0,
                timer: null,
                s: "<p>Hi</p>",
                
            },
            created(){
                this.timer = setInterval(this.nextImg, 2000);
            },
            methods:{
                clickHandler(){
                    this.show = !this.show;
                },
                changeColor(){
                    this.isBlue = !this.isBlue;
                },
                clickImg(item){
                    // console.log
                    this.currentSrc = item.src;
                },
                nextImg(){
                    // alert(123)
                    console.log(this.currentIndex)
                    console.log(this.imgArr.length-1)
                    if(this.currentIndex==this.imgArr.length-1){
                        this.currentIndex = 0;
                    }
                    this.currentIndex += 1;
                    console.log(this.imgArr[this.currentIndex].src);
                    this.currentSrc = this.imgArr[this.currentIndex].src;
                },
                closeTimer(){
                    clearInterval(this.timer);
                },
                startTimer(){
                    this.timer = setInterval(this.nextImg, 2000);
                },
            },
        })
    </script>
</body>
</html>

 

posted @ 2019-09-11 16:08  市丸银  阅读(154)  评论(0)  编辑  收藏  举报