14 Vue-计算属性setter

行走的皮卡丘

已于 2022-05-30 09:59:11 修改

阅读量507

点赞数 23

分类专栏： Vue学习基础文章标签： vue java javascript

于 2020-08-07 10:15:07 首次发布

本文链接：https://blog.csdn.net/weixin_44908159/article/details/107831755

版权

Vue学习基础专栏收录该内容

27 篇文章 11 订阅

订阅专栏

在这里插入图片描述

14 Vue-计算属性setter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
		<style type="text/css">
			ul li.active {
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--绑定计算属性的方法getCurrentSongSrc-->
			<!--页面一加载立马调用getCurrentSongSrc方法-->
			<audio autoplay controls v-bind:src='getCurrentSongSrc'></audio>
			<ul>
				<li v-for="(item,index) in musicData" @click='clickHandler(index)' :class='{active:initIndex==index}'>
					<h3>{{item.id}} - 歌名：{{item.name}}</h3>
					<p>歌手：{{item.author}}</p>
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js">

	</script>
	<script type="text/javascript">
		var musicData = [{
				id: 1,
				name: '将故事写成我们',
				author: '林俊杰',
				songSrc: './static/将故事写成我们-林俊杰.mp3'
			},
			{
				id: 2,
				name: '像我这样的人',
				author: '胖胖胖',
				songSrc: './static/胖胖胖 - 像我这样的人.mp3'
			},
			{
				id: 3,
				name: '世间美好与你环环相扣 (薛之谦粉丝版)',
				author: '韦小力',
				songSrc: './static/韦小力 - 世间美好与你环环相扣 (薛之谦粉丝版).mp3'
			},
			{
				id: 4,
				name: '爱相随 (Live)',
				author: '周华健',
				songSrc: './static/周华健 - 爱相随 (Live).mp3'
			},
		]

		new Vue({
			el: '#app',
			data() {
				return {
					musicData: musicData,
					initIndex: 0,
					style: false,
				}
			},
			// 计算属性实时监听musicData和initIndex  只要数据一修改立马执行监听函数
			computed: {
				getCurrentSongSrc: {
					get: function() {
						return this.musicData[this.initIndex].songSrc;
					},

					// 实时监听设置属性
					set: function(newV) {
						this.initIndex = newV
					}

				}
			},

			methods: {
				clickHandler(index) {
					
					// // 点击click事件后调用该方法切换歌曲
					// this.initIndex=index
					this.getCurrentSongSrc = index // index会传给getCurrentSongSrc中的set中的newV

				}
			}
		});
	</script>
</html>