Vue.set()方法的使用

简述：有时候可能会有等待刷新视图的时候，需要用到$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>复制代码

转载于:https://juejin.im/post/5cdbea3ff265da035b61bcb6