Vue中 使用 v-for 时动态绑定 ref

<template>
  <div class="wrap">
    <div v-for="(item,i) in testArr" :key="item.id" :ref="`record${i}`" :id="'record'+i" 
      @click="changeStyle(i)">
      {{item.name}}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testArr:[
        {
          id:'1',
          name:'张三',
        },{
          id:'2',
          name:'李四',
        },{
          id:'3',
          name:'王五',
        }
      ]
    }
  },
  methods: {
    changeStyle(i){
      this.$refs[`record${i}`][0].style.color = 'red';
    }
  },
  mounted(){
    document.getElementById('record2').style.color = 'green';
  }
}
</script>