一、简单音乐播放器
<!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>