vue控制循环出来的某个dom的显示与隐藏

这里贴出来的代码是在项目基础上变通过来的，项目内循环的dom是element-ui的组件，组件dom和普通div dom的获取方式不一样。组件dom用this.$refs['ref名'][0].$el获取的，普通dom直接this.$refs['ref名']应该就可以的，具体的我没有测。

关键方法

  this.$refs[`btn${titleId}`][0].$el.style.display = 'block'

给每个目标dom都绑定了ref，ref名称是动态的，通过下标命名的，独一无二的。获取到这个dom并控制样式。

背景

循环list得到一个dom，该dom含有一个 “标题”，一个“按钮”，想通过点击标题，展示该标题对应的按钮

代码

  <div v-for="(item,index) in list" :key="index">
      <div :class="`title${index}`" @click="showBtn($event)">{{ item.title }}</div>
      <div :class="`bnt btn${index}`" :ref="`btn${index}`">按钮</div>
  </div>

    // 点击显示按钮
showBtn(e) {
  let titleId = e.target.className.slice(5)// 比如点击的dom类名为`title10`，这里获取到`10`
  let style = this.$refs[`btn${titleId}`][0].$el.style.display//找到ref名为`btn10`的dom，获取到其display属性，在css中设置none，第一次获取时，style为空，这个我不知道为什么
  if (!style || style === 'none') {
    this.$refs[`btn${titleId}`][0].$el.style.display = 'block'
  } else {
    this.$refs[`btn${titleId}`][0].$el.style.display = 'none'
  }
}

.btn{
	display: none;
}