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

Posted 2021-07-29 明天也要努力

关键点

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