计算属性之computed

最新推荐文章于 2022-11-30 18:11:53 发布

谁动了我的bug

最新推荐文章于 2022-11-30 18:11:53 发布

阅读量249

点赞数

分类专栏： Vue 文章标签：计算属性之computed

本文为whhtjl原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35393693/article/details/103108394

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>计算属性之computed</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style: none;
			}
			
			ul li {
				margin: 20px 20px;
				padding: 10px 5px;
				border-radius: 3px;
			}
			
			ul li.active {
				background-color: #66FFFF;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<audio :src='getCurrentSongSrc' autoplay controls></audio>
			<ul>
				<li v-for='(item,index) in musicData' :class='{active:currentIndex == index}' @click='clickHandler(index)'>
					<h2>{{item.id}}- 歌名：{{item.name}}</h2>
					<p>歌手:{{item.author}}</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			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: '#app',
				data() {
					return {
						musicData: musicData,
						currentIndex: 0
					}
				},
				computed: {
					getCurrentSongSrc: function() {
						// 默认只有getter
						return this.musicData[this.currentIndex].songSrc
					}
				},
				methods: {
					clickHandler(index) {
						this.currentIndex = index;
					}
				}
			});
		</script>
	</body>

</html>