Article From:https://segmentfault.com/q/1010000011705557
Question:

I imagine using Vue to build a function for a music player, but the last one and the next one are looped in arrays
My local path is stored in the array.

new Vue({
    el:"body",
    data:{
        arr: [{ name: 'music/ttdd.mp3',//This is the pathSinger:'xxxxxxx'},{name:'music/xxxxxxxx.mp3',Singer:'xxxxx']],Index:0,Music: ""},Methods:{Next: () / / / /This is the function I click next.This.index++If (this.index> this.arr.length-1) {This.index=0}This.music=this.arr[this.index].name}}})

But this is what I wrote when I rendered the page.

//I used to write when I was an array.< audio autobuffer v-for= "I in arr": src=['path/'+i.name] autoloop loop controls controls-el:audio> < /audio>/ / this can be used, but as long as it is a single data.< audio autobuffer: src=['path/'+music] autoloopLoop controls v-el:audio> < /audio>

Then: src=music is also wrong.
How can we bind data to attributes of an element?

Answer 0:

I’ll rewrite it for you, or make something bound to SRC a computational property for other locations

new Vue({
    el:"body",
    data:{
        arr: [{ name: 'music/ttdd.mp3',//This is the pathSinger:'xxxxxxx'},{name:'music/xxxxxxxx.mp3',Singer:'xxxxx']],Index:0},Methods:{Next: () / / this is the function I click next.This.index++If (this.index> this.arr.length-1) {This.index=0}}}})/ / this can be used, but as long as it is a single data.< audio autobuffer: src= "'path/'+arr[index].name"Autoloop loop controls v-el:audio> < /audio>

Similar Posts:

Link of this Article: Vue.js: SCR data binding

Leave a Reply

Your email address will not be published. Required fields are marked *