手动轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <img :src="images[urrentIndex].imgSrc" alt=""> <button @click="nextP">下一张</button> <button @click="lastP">上一张</button> </div> <script src="./vue.js"></script> <script> new Vue({ el:'#d1', data(){ return{ images:[ {id:1,imgSrc:'./1.jpg'}, {id:1,imgSrc:'./2.jpg'}, {id:1,imgSrc:'./3.jpg'}, {id:1,imgSrc:'./4.jpg'}, {id:1,imgSrc:'./5.jpg'}, ], urrentIndex:0 } }, methods:{ nextP(){ if(this.urrentIndex === 4){ this.urrentIndex =0; }else {this.urrentIndex++;} }, lastP(){ if(this.urrentIndex === 0){ this.urrentIndex =4; }else { this.urrentIndex--;} } } }) </script> </body> </html>
cdn :
www.bootcdn.cn
利用vue的created() 钩子 和setInterval来实现自动轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <img :src="images[urrentIndex].imgSrc" alt=""> <button @click="nextP">下一张</button> <button @click="lastP">上一张</button> </div> <script src="./vue.js"></script> <script> new Vue({ el:'#d1', data(){ return{ images:[ {id:1,imgSrc:'./1.jpg'}, {id:1,imgSrc:'./2.jpg'}, {id:1,imgSrc:'./3.jpg'}, {id:1,imgSrc:'./4.jpg'}, {id:1,imgSrc:'./5.jpg'}, ], urrentIndex:0 } }, methods:{ nextP(){ if(this.urrentIndex === 4){ this.urrentIndex =0; }else {this.urrentIndex++;} }, lastP(){ if(this.urrentIndex === 0){ this.urrentIndex =4; }else { this.urrentIndex--;} } } , created(){ setInterval(()=>{ if(this.urrentIndex === 3){ this.urrentIndex =0; }else {this.urrentIndex++;} },3000); } }) </script> </body> </html>
ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> {{ List }}--{{ x1 }} </div> <script src="./vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script> new Vue({ el:'#d1', data(){ return{ List:[] , x1:2, } }, methods:{ nextP(){ if(this.urrentIndex === 4){ this.urrentIndex =0; }else {this.urrentIndex++;} }, lastP(){ if(this.urrentIndex === 0){ this.urrentIndex =4; }else { this.urrentIndex--;} } } , created(){ $.ajax({ url:"https://api.apiopen.top/getJoke?page=1&count=2&type=video", type:'get', success:(data)=>{ console.log(data); if(data.code=='200'){ console.log(data.result); this.List = data.result; console.log(this.List); } }, error:(err)=>{ console.log(err); } }) } }) </script> </body> </html>
简单的音乐播放器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ul li.active{ background-color: darkcyan; } </style> </head> <body> <div id="music"> <!--@ended 播放完成 会自动调用该方法--> <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio> <ul> <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'> <h2>歌手：{{ item.author }}</h2> <p>歌名：{{ item.name }}</p> </li> </ul> </div> <script src="./vue.js"></script> <script> var musicData = [{ id: 1, name: '于荣光 - 少林英雄', author: '于荣光', songSrc: './static/于荣光 - 少林英雄.mp3' }, { id: 2, name: 'Joel Adams - Please Dont Go', author: 'Joel Adams', songSrc: './static/Joel Adams - Please Dont Go.mp3' }, { id: 3, name: 'MKJ - Time', author: 'MKJ', songSrc: './static/MKJ - Time.mp3' }, { id: 4, name: 'Russ - Psycho (Pt. 2)', author: 'Russ', songSrc: './static/Russ - Psycho (Pt. 2).mp3' } ]; new Vue({ el: '#music', data() { return { musicData:[], currentIndex:0 } }, methods:{ songHandler(i){ this.currentIndex = i; }, nextHanlder(){ this.currentIndex++; } }, created(){ this.musicData = musicData } }) </script> </body> </html>
计算属性 （简化{{ }}内的显示，容易维护）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <p>{{ myMsg }}</p> <button @click='clickHandler'>修改</button> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data() { return { msg: "alex", age: 18 } }, created() { //定时器 ajax 库 function(){} setInterval(() => { }) }, methods: { clickHandler() { //this的指向就是当前对象 this.msg = "wusir"; this.age = 20; }, clickHandler: function () { console.log(this); } }, computed: { myMsg: function () { //业务逻辑 // 计算属性默认只有getter方法 return `我的名字叫${this.msg},年龄是${this.age}`; } } }) console.log(vm); </script> </body> </html>