在vue中获得某个dom或者组件，我们会通过绑定 ref然后通过绑定后的名字来获取这个dom,如下：

绑定指定某一个组件

• 绑定

  <div ref="box"></div>
  

• 获取

  this.$refs.box
  

但是，如果我们在v-for中绑定ref的话，那么这个ref就会存在多个，比如我们点击事件让对应的显示/隐藏的话，我们很难找到这个对应的元素。
那么，这时我们需要动态绑定不一样的ref，那么我们如何实现呢❓

使用:ref动态设置组件名称

• 绑定

   <div v-for="item in items" :key="item.tab" :ref="'show'+item.id" @click="clickItem(item)">{{ item.tab }}
  </div>
  

• 数组

  items: [{ tab: "Tab1", content: "Tab 1 Content", id: 1 },{ tab: "Tab2", content: "Tab 2 Content", id: 2 },{ tab: "Tab3", content: "Tab 3 Content", id: 3 }],
  

• 获取(点击变色)

  clickItem(value) {// 变量取反，控制设置的颜色this.isClick = !this.isClick;if (this.isClick) {this.$refs[`show${value.id}`][0].style = "color:red";}else{this.$refs[`show${value.id}`].style = "color:black";}
  }
  

  其中获取 dom节点的核心代码是:

  this.$refs[`show${value.id}`][0]
  

• 效果

  

注意：
我们一般字符串加变量都会采用如下写法：

`show${item.id}`

绑定ref的话是需要加冒号的，但是加了之后就不需要去再采取模板字符串的写法，直接在引号中写入即可:

<div v-for="item in items" :key="item.tab" :ref="'show'+item.id" @click="clickItem(item)">{{ item.tab }}
</div>