vue.js基础二

老师讲课代码，实现歌曲的上一首和下一首，所需音乐文件在电脑中。

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{list-style: none}
		li{
			border-bottom: 1px solid red;

		}
	</style>
</head>
<body>
	<div id="music">
		<audio :src="currentSong" autoplay controls autoloop @ended = 'nextSong()'></audio>

		<ul>
			<li v-for = '(item,i) in songs' @click = "currentHandler(item,i)">
				<h3>作者:{{item.author}}</h3>
				<p>{{item.name}}</p>
			</li>
		</ul>
		<button @click = 'lastSong()'>上一首</button>
		<button @click = 'nextSong()'>下一首</button>	

	</div>
	<script type="text/javascript" src="./vue.js"></script>
	<script type="text/javascript">
		var songs = [
			{id:1,src:'./audios/1.mp3',name:"la la Land",author:'Ryan'},
			{id:2,src:'./audios/2.mp3',name:"The Best of",author:'Skillof'},
			{id:3,src:'./audios/3.mp3',name:"It My Life",author:'Bon'},
			{id:4,src:'./audios/4.mp3',name:"Tender",author:'Blur'}

		];

		// MVVM  Model==》数组  数据库 View == document 标签 VM

		// 数据的双向绑定 m<=>v
		var music = new Vue({
			el:'#music',
			data:{
				// 数据属性
				songs:songs,
				currentSong:"./audios/1.mp3",
				index:0
			},
			methods:{
				currentHandler(item,i){
					this.index = i;

					// this.currentSong = item.src;
					this.currentSong = this.songs[i].src;
				},
				nextSong(){
					this.index++;
					this.currentSong = this.songs[this.index].src;

					// 作业：判断数据越界 实现上一首的功能,自己已经实现了
				},
				lastSong(){
					this.index--;
					this.currentSong = this.songs[this.index].src;

				}

			}
		})

	</script>

</body>
</html>

　　

 

posted @ 2018-04-06 21:33  Justin壮志凌云  阅读(95)  评论(0)    收藏  举报