一,简单实现轮播图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <img :src="images[currentIndex].imgSrc" alt="" @click="imgHandler">
10     <br>
11     <button @click="prevHandler">上一张</button>
12     <button @click="nextHandler">下一张</button>
13 </div>
14 
15 <script src="../vue.js"></script>
16 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
17 <script>
18     let vm = new Vue({
19         el:'#app',
20         data(){
21             return{
22                 images:[
23                     {id:1,imgSrc:"./images/1.jpg"},
24                     {id:2,imgSrc:"./images/2.jpg"},
25                     {id:3,imgSrc:"./images/3.jpg"},
26                     {id:4,imgSrc:"./images/4.png"},
27                 ],
28                 currentIndex:0
29             }
30         },
31         methods:{
32             nextHandler(e){
33                 this.currentIndex++;
34                 if (this.currentIndex == 4){
35                     this.currentIndex = 0;
36                 }
37             },
38             prevHandler(e) {
39 
40             },
41             imgHandler(e) {
42                 console.log(e.target);
43                 console.log(this);
44             }
45         },
46         //钩子函数,实现隔两秒自动换图
47         created(){
48             setInterval(() => {
49                 this.currentIndex++;
50                 if(this.currentIndex == 4) {
51                     this.currentIndex = 0;
52                 }
53             },2000);
54         }
55     })
56 </script>
57 </body>
58 </html>
View Code

二,简单实现音乐播放器

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <style>
 8         ul li.active{
 9             background-color: darkcyan;
10         }
11     </style>
12 </head>
13 <body>
14 <div id="music">
15     <!--@ended 播放完成 会自动调用该方法-->
16     <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>
17     <ul>
18         <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
19             <h2>歌手：{{ item.author }}</h2>
20             <p>歌名：{{ item.name }}</p>
21         </li>
22     </ul>
23 </div>
24 <script src="./vue.js"></script>
25 <script>
26     var musicData = [{
27         id: 1,
28         name: '于荣光 - 少林英雄',
29         author: '于荣光',
30         songSrc: './static/于荣光 - 少林英雄.mp3'
31     },
32         {
33             id: 2,
34             name: 'Joel Adams - Please Dont Go',
35             author: 'Joel Adams',
36             songSrc: './static/Joel Adams - Please Dont Go.mp3'
37         },
38         {
39             id: 3,
40             name: 'MKJ - Time',
41             author: 'MKJ',
42             songSrc: './static/MKJ - Time.mp3'
43         },
44         {
45             id: 4,
46             name: 'Russ - Psycho (Pt. 2)',
47             author: 'Russ',
48             songSrc: './static/Russ - Psycho (Pt. 2).mp3'
49         }
50     ];
51 
52     new Vue({
53         el: '#music',
54         data() {
55             return {
56                 musicData:[],
57                 currentIndex:0
58             }
59 
60         },
61         methods:{
62             songHandler(i){
63                 this.currentIndex = i;
64             },
65             nextHanlder(){
66                 this.currentIndex++;
67             }
68         },
69 
70         created(){
71             this.musicData = musicData
72         }
73     })
74 </script>
75 </body>
76 </html>
View Code