vue计算属性例子

不使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="music">
        <audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio>
        <ul>
            <li v-for="(item, index) in musicArr" @click="clickHandler(item)">
                <h4>歌名: {{item.name}}</h4>
                <p>作者：{{item.author}}</p>
                <hr>
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var songs = [
            {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
            {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
            {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
            {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
        ]
        var mu = new Vue({
            el: "#music",
            data: {
                musicArr: songs,
                currentSrc: "./audios/1.mp3",
                currentIndex: 0,

            },
            methods:{
                clickHandler(item){
                    this.currentSrc = item.src;
                },
                nextSongs(){
                    this.currentIndex += 1;
                    this.currentSrc = this.musicArr[this.currentIndex].src;
                    console.log(this.currentSrc)
                } 
            },
            computed:{},
        })
    </script>
</body>
</html>

使用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="music">
        <audio :src="getSrc" autoplay="" controls=""  @ended="nextSongs"></audio>
        <ul>
            <li v-for="(item, index) in musicArr" @click="clickHandler(index)">
                <h4>歌名: {{item.name}}</h4>
                <p>作者：{{item.author}}</p>
                <hr>
            </li>
        </ul>
        <button @click="addOne">添加</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var songs = [
            {id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
            {id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
            {id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
            {id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
        ]
        var mu = new Vue({
            el: "#music",
            data:{
                musicArr: songs,
                currentIndex: 0,

            },
            methods: {
                clickHandler(index){
                    this.currentIndex = index;
                },
                nextSongs(){
                    this.currentIndex++;
                },
                addOne(){
                    this.musicArr.push({id:5, src:"./audios/4.mp3", name:"岁1月神偷", author:"金玟岐"})
                },
            },
            computed:{
                getSrc:{
                    set:function(newValue){},
                    get:function(){
                        return this.musicArr[this.currentIndex].src;
                    }
                },
            }
        })
    </script>
</body>
</html>

计算data的属性

猜你喜欢