vue.js :scr 数据绑定

Question

我像想用vue搭建一个关于音乐播放器的功能 但是其中上一首 下一首则是用数组循环出来数组中存放着我的本地路径如new Vue({    el:"body",    data:{        arr: [{ name: 'music/ttdd.mp3',//这是路径             singer: 'xxxxxxx'},,           { name: 'music/xxxxxxxx.mp3',             singer: 'xxxxx'          }],          index:0,          music:""    },    methods:{        next:(){//这是我点击下一首的函数            this.index++            if(this.index>this.arr.length-1){                this.index=0            }            this.music=this.arr[this.index].name        }    }})但是我页面渲染的时候是这样写的//以前当是数组的时候我是这样写的<audio autobuffer v-for=“i in arr” :src=['path/'+i.name] autoloop loop controls v-el:audio></audio>//这样是可以使用的但是只要是单个数据时<audio autobuffer :src=['path/'+music] autoloop loop controls v-el:audio></audio>然后:src=music也是报错的究竟怎样才能把数据绑定到元素的属性上呢

Answer 1

我给你改写一下吧,也可以吧src上绑定的东西搞成一个计算属性，方便其他位置用

new Vue({

    el:"body",

    data:{

        arr: [{ name: 'music/ttdd.mp3',//这是路径

             singer: 'xxxxxxx'},,

           { name: 'music/xxxxxxxx.mp3',

             singer: 'xxxxx'

          }],

          index:0

    },

    methods:{

        next:(){//这是我点击下一首的函数

            this.index++

            if(this.index>this.arr.length-1){

                this.index=0

            }

        }

    }

})

//这样是可以使用的但是只要是单个数据时

<audio autobuffer :src="'path/'+arr[index].name" autoloop loop controls v-el:audio></audio>