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">
<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,
}
},
computed: {
getCurrentSongSrc: {
get: function() {
return this.musicData[this.initIndex].songSrc;
},
set: function(newV) {
this.initIndex = newV
}
}
},
methods: {
clickHandler(index) {
this.getCurrentSongSrc = index
}
}
});
</script>
</html>