Vue 计算属性

Vue 计算属性（computed）

简单实现利用计算属性的方法实现点击切换音频

	<div id="app">  
        <audio :src="getCurrentSrc" autoplay controls></audio>
        <ul>
            <li v-for="(item,index) in musicList" @click="clickHandler(index)">
                <h2>{{item.id}}、 歌名：{{item.name}}</h2>
            </li>
        </ul>
    </div>

	var musicList=[
            {id:1, name:'one',src:'./mp3/5c88d11f4d75753254.mp3'},
            {id:2, name:'two',src:'./mp3/5c88d12060a8716512.mp3'},
            {id:3, name:'three',src:'./mp3/5c892b612ab8918603.mp3'},
            {id:4, name:'four',src:'./mp3/5c8948aa510b887278.mp3'},
            {id:5, name:'five',src:'./mp3/5c89189c4f4cf81405.mp3'},
        ]
    new Vue({
        el:"#app",
        data() {
            return {
                musicList:musicList,
                currentIndex:0,
            }
        },
        methods: {
            clickHandler(index){
                this.currentIndex = index;
            }
        },
        computed: {
            // 计算属性默认只有getter
            getCurrentSrc(){
                return this.musicList[this.currentIndex].src;
            }
        },

    })