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

关键点

1. 使用 :ref="`record${i}`" （或者 :ref="'record'+i"），为每一项动态添加 ref;
2. 使用 this.$refs[`record${
      
      i}`] 获取当前元素 dom 结构

完整代码

<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>

DOM 结构