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

功能简介：

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

5、可以添加的style样式汇总，详见https://blog.youkuaiyun.com/LzzMandy/article/details/91372903