SOURCE

console.clear();
var Main = {
  data() {
    return {
      index: '',
      arr: [{
        id: 0,
        text: '哈哈'
      },
      {
        id: 1,
        text: '嘿嘿'
      },
      {
        id: 2,
        text: '最后一行'
      }]
    }
  },
  methods: {
    tips(index) {
      this.index = index + 1;
    },
    play() {
      this.$refs.myaudio.play();
    },
    pause() {
      this.$refs.myaudio.pause();
    },
    stop() {
      this.$refs.myaudio.pause();
      this.$refs.myaudio.currentTime = 0;
    }
  }
}

var Ctor = Vue.extend(Main);
var app = new Ctor().$mount('#app');

<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js">
</script>
<div id="app">
  <table>
    <tr v-for="(item, index) in arr" v-bind:key="index">
      <td>
        {{ item.text }}
      </td>
      <td>
        <el-button @click="tips(index)">点击吧</el-button>
      </td>
    </tr>
  </table>
  <h4 v-if="index">点击的行数是 {{ index }} </h4>
  <el-button type="primary" v-on:click="play">播放</el-button>
  <el-button type="warning" v-on:click="pause">暂停</el-button>
  <el-button type="danger" v-on:click="stop">停止</el-button>
  <audio autobuffer loop ref="myaudio" src="http://blog.duanjinqiu.cn/public/%E5%AE%89%E5%92%8C%E6%A1%A5-%E5%AE%87%E8%A5%BF.mp3" controls="controls">
  </audio>
</div>

@import url("//unpkg.com/element-ui@2.5.4/lib/theme-chalk/index.css");
div p:nth-last-of-type(1) {
  color: red;
}

div p:last-of-type {
  font-size: 1.2rem;
}