Vue.set()方法的使用

517 阅读1分钟

简述:有时候可能会有等待刷新视图的时候,需要用到$set()方法,例如: 以下通过语音文件来计算语音时长。

/*
*this.$set(Obj,Name,Value)参数说明:
*参数1:对象
*参数2:准备设置的键名
*参数3:准备设置的值
*/

<template>
  <div>
    <span>{{voice.time}}</span>
    <audio src="" ref="vv"></audio>
  </div>
</template>

<script>
export default {
  data(){
    return {
      url:'http://2323242.mp3',
      voice:{}
    }
  },
  mounted(){
    //const audio = document.createElement("audio");
    //audio.src = this.url;
    //audio.load();
    const audio = this.$refs.vv;
    audio.src = this.url;
    audio.oncanplay = ()=>{
      const voicelong = audio.duration;
      this.$set(this.voice,'time',voicelong)
    };
  }
}
</script>