<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .show-test{ width: 50px; height: 50px; background-color: red; } .show_yellow{ width: 50px; height: 50px; background-color: yellow; } .a-img{ width: 100px; height: 100px; background-color: red; } .lunbo ul{ width: 100%; overflow: hidden; list-style: none; } .lunbo ul li{ text-align: center; width: 40px; float: left; background: purple; margin: 10px; } .img_checked{ text-align: center; width: 40px; float: left; background: red!important; margin: 10px; } </style> </head> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <body> <div id="app"> <!-- 模板语言：可以进行简单的计算，可以引入Vue对象的值， --> <h1>{{msg}}</h1> <h1>{{1+1}}</h1> <h1>{{'hello'}}</h1> <h1>{{1>0?'Y':'N'}}</h1> <!-- 指令系统 --> <div class="show-test" v-if='show'>哈哈哈</div> <div class="show-test" v-show='show'>嘿嘿嘿</div> <!-- v-for --> <ul v-for="(site,index) in array_test"> <li> <span>{{index+1}}</span>{{site}} </li> </ul> <ul v-for="(title,data) in object_test"> <li> {{data}}:<span>{{title}}</span> </li> </ul> <!-- v-on --> <button v-on:click="coloru"> 切换 </button> <!-- v-bind --> <div class="show-test" v-bind:class="{show_yellow:bcolor}"> color </div> <img v-bind:src="show_img" v-on:mouseenter="closeTimer" v-on:mouseleave="openTimer"> <div class="lunbo"> <ul> <li v-for="(item,index) in img_array" v-on:click="find_img(index)" v-bind:class="{img_checked:img_checked(index)}">{{index+1}}</li> </ul> <button v-on:click="up_img">上一张</button> <button v-on:click="next_img">下一张</button> </div> </div> </body> <script> new Vue({ el:"#app", data:{ msg:"hello vue", show:false, array_test:["北京","南京","东京"], object_test:{"name":"aike","age":18}, bcolor:false, img_array:[ {"title":1, "src":"img/1.png"}, {"title":2, "src":"img/2.png"}, {"title":3, "src":"img/3.png"}, {"title":4, "src":"img/4.png"}, ], show_img:"img/1.png", img_count:0, li_color:false, // 选择的图片页码标识为红色 img_checked:function(index){ if(this.img_count==index){ return true }else{ return false } }, timer:null, }, //开启生命周期，每秒执行下一张图片函数，实现轮播 created(){ this.timer=setInterval(this.next_img,1000) }, methods:{ coloru(){ // $this.attr("class", "show_yellow") this.show=!this.show; this.bcolor=!this.bcolor; }, //下一张图片 next_img(){ if(this.img_count==this.img_array.length-1){ this.img_count=0 } else{ this.img_count ++ } // this.show_img=`img/${this.img_count}.png` this.show_img=this.img_array[this.img_count].src }, //上一张图片 up_img(){ if(this.img_count==0){ this.img_count=this.img_array.length-1 } else{ this.img_count -- } // this.show_img=`img/${this.img_count}.png` this.show_img=this.img_array[this.img_count].src }, //选中图片 find_img(index){ this.img_count = index this.show_img=`img/${index+1}.png` }, //关闭图片自动轮播 closeTimer(){ clearInterval(this.timer) }, //开启图片自动轮播 openTimer(){ this.timer=setInterval(this.next_img,1000) } } }); </script> </html> 图片轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <div> <h1> 播放歌曲 </h1> <div> <button v-on:click="upMusic">上一首</button> <audio v-bind:src="get_music_src" autoplay controls="controls" v-on:ended="autoNextMusic"></audio> <button v-on:click="nextMusic">下一首</button> </div> </div> <div> <ul v-for="(items,index) in mp3_list"> <li v-on:click="playMusic(index)">{{items.name}}</li> </ul> </div> </div> <script> var vm = new Vue({ el:"#app", data:{ musicIndex:0, mp3_list:[ { "id":1, "src":"./media/来自天堂的魔鬼.mp3", "name":"来自天堂的魔鬼.mp3", }, { "id":2, "src":"./media/起风了.mp3", "name":"起风了.mp3", }, { "id":3, "src":"./media/野狼disc.mp3", "name":"野狼disc.mp3", }, { "id":4, "src":"./media/周深.mp3", "name":"周深.mp3", }, { "id":5, "src":"./media/English.mp3", "name":"English.mp3", } ], }, methods:{ //点击播放 playMusic(index){ console.log(index) this.musicSrc=this.mp3_list[index].src this.musicIndex=index }, //自动下一首 autoNextMusic(){ if(this.musicIndex==this.mp3_list.length-1){ this.musicIndex=0 } else{ console.log("aaa"+this.musicIndex) this.musicIndex++ } }, //点击下一首 nextMusic(){ if(this.musicIndex==this.mp3_list.length-1){ this.musicIndex=0 } else{ this.musicIndex++ } }, //点击上一首 upMusic(){ if(this.musicIndex==0){ this.musicIndex=this.mp3_list.length-1 } else{ this.musicIndex-- } } }, computed:{ get_music_src(){ return this.mp3_list[this.musicIndex].src } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="../node_modules/vue/dist/vue.js"></script> <script src="../node_modules/jquery/dist/jquery.js"></script> <div id="app"> <div> <h1> 播放歌曲 </h1> <div> <button v-on:click="upMusic">上一首</button> <audio v-bind:src="musicSrc" autoplay controls="controls" v-on:ended="autoNextMusic"></audio> <button v-on:click="nextMusic">下一首</button> </div> </div> <div> <ul v-for="(items,index) in mp3_list"> <li v-on:click="playMusic(index)">{{items.name}}</li> </ul> </div> </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"", musicSrc:"", musicIndex:0, mp3_list:[ { "id":1, "src":"./media/来自天堂的魔鬼.mp3", "name":"来自天堂的魔鬼.mp3", }, { "id":2, "src":"./media/起风了.mp3", "name":"起风了.mp3", }, { "id":3, "src":"./media/野狼disc.mp3", "name":"野狼disc.mp3", }, { "id":4, "src":"./media/周深.mp3", "name":"周深.mp3", }, { "id":5, "src":"./media/English.mp3", "name":"English.mp3", } ], }, methods:{ //点击播放 playMusic(index){ console.log(index) this.musicSrc=this.mp3_list[index].src this.musicIndex=index }, //自动下一首 autoNextMusic(){ if(this.musicIndex==this.mp3_list.length-1){ this.musicSrc=this.mp3_list[0].src this.musicIndex=0 } else{ console.log("aaa"+this.musicIndex) this.musicIndex++ this.musicSrc=this.mp3_list[this.musicIndex].src } }, //点击下一首 nextMusic(){ if(this.musicIndex==this.mp3_list.length-1){ this.musicSrc=this.mp3_list[0].src this.musicIndex=0 } else{ this.musicIndex++ this.musicSrc=this.mp3_list[this.musicIndex].src } }, //点击上一首 upMusic(){ if(this.musicIndex==0){ this.musicSrc=this.mp3_list[this.mp3_list.length-1].src this.musicIndex=this.mp3_list.length-1 } else{ this.musicIndex-- this.musicSrc=this.mp3_list[this.musicIndex].src } } }, }) </script> </body> </html>