VUE-使用v-for为每一项动态添加ref

最新推荐文章于 2025-06-30 12:25:16 发布

原创最新推荐文章于 2025-06-30 12:25:16 发布 · 2w 阅读

44 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

83 篇文章

订阅专栏

本文介绍如何使用Vue.js的v-for指令循环显示列表，并通过动态添加ref实现点击事件，改变列表项的颜色及位置。利用this.$refs获取DOM，实现元素的动态样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能简介：

1、循环显示9项

2、点击每一项，每一项字体颜色变蓝，向下和向右分别移动100px

关键点：

1、使用v-for，循环加载每一项

2、使用:ref="`list${i}`" ，为每一项动态添加ref

<div id="app">
    <div class="frame" ref="frame">
      <div v-for="(item,i) in list" :key="i" @click="changeColor(item,i)" :ref="`list${i}`">{{item}}</div>
    </div>
    
  </div>

3、点击事件，使用this.$refs[`list${i}`][0] 获取当前元素dom结构

<script>
    var vm = new Vue({
      el: '#app',
      data: {
        list:['1','22','333','4444','55555','666666','7777777','88888888','999999999']
      },
      mounted() {
        this.$refs.frame.style.color='red'
      },
      methods: {
        changeColor(item,i){
          debugger
          let _y='100px'
          let _x='100px'
          this.$refs[`list${i}`][0].style.color='blue'
          this.$refs[`list${i}`][0].style.transform='translate('+_x+','+_y+')'
        }
      }
    })
  </script>

4、dom结构