vue computed

computed 用来监听多个

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title></title>
    <style>
        	*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
		}
		ul li{
			margin: 20px 20px;
			padding: 10px 5px;
			border-radius: 3px;
		}
		ul li.active{
			background-color:rebeccapurple;
		}
    </style>
</head>
<body>
	<div id="app">  
        <audio :src = 'getCurrentSongSrc' autoplay  controls></audio>
       </audio>
       <ul >
           <li v-for="(item,index)  in musicData"  :class = '{active:currentIndex == index}' @click = 'clickHandler(index)'>
               <p>歌手:{{item.auther}}</p>
               <P>{{item.kid}} - 歌名：{{item.name}}</P>
           </li>
       </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script type="text/javascript">
       let  musicData=[          
            {
               id:1,name:"我已经爱上你",auther:'二郎',src:'./static/情词尧,二郎 - 我已经爱上你（情词尧／二郎）.mp3'
            },{
              id:2,name:"JUNIEL - illa illa",auther:'일라 일라',src:'./static/JUNIEL - illa illa (일라 일라).mp3'
            }, {
              id:3,name:"体面",auther:'迟青',src:'./static/迟青 - 体面.mp3'
            },{
              id:4,name:"私奔",auther:'曾轶可',src:'./static/曾轶可 - 私奔.mp3'  
            }
       ]
		new Vue({
			el:'#app',
			data() {
                return  {
                    musicData:musicData,
                    currentIndex:0
                   }
            },
            computed:{
				getCurrentSongSrc:function() {
					// 默认只有getter
					return this.musicData[this.currentIndex].src
				}
			},
            methods:{
				clickHandler(index){
					this.currentIndex = index;
				}
			}
		});
	</script>
	

</body>
</html>

　　效果：

 

posted @ 2018-08-23 22:21  1点  阅读(204)  评论(0)  编辑  收藏  举报