将班级更改为视频时间

时间:2019-03-27 10:09:21

标签: vue.js

我需要将某个跨度的类更改为视频的时间。我使用v-for从数组创建数组的span标签,在数组内部我具有文本的开始时间和结束时间,因此我想更改单个文本的类,以检查间隔和实际视频时间。我尝试了这段代码:

```

   <span :class="{'selected':(item.id===currentIndex)}" v-for="item in Array">
   {{item.text}}
   </span>


data(){
return{
Array:    [{
            id: 0,
            start_time: 0,
            end_time: 1,
            text: "Hello"
        }, {
            id: 1,
            start_time: 1,
            end_time: 2,
            text: "guys."
        }, {
            id: 2,
            start_time: 2,
            end_time: 3,
            text: "In this lesson"
        }, ...]
},
currentIndex:'',
}            

setInterval(myTimer, 500);

function myTimer() {
                for (let i in array) {
                    if (Math.round(_myplayer.currentTime()) != 0) {
                        if (array[i].start_time < Math.round(_myplayer.currentTime()) && Math.round(_myplayer.currentTime()) <= array[i].end_time) {
                           this.currentIndex=i;
                        }
                    }
                }
            }               
```

这些是我代码的主要部分,主要问题是将currentIndex链接到范围的ID。这是TED文字记录的重点 对不起,我的英语,谢谢

1 个答案:

答案 0 :(得分:0)

尝试将设置的时间间隔放入“创建的”生命周期挂钩中,例如:

created: function () {
    setInterval(myTimer, 500);
  }

或者更好地使用v模型来查看您的ID