vue2.x 使用event返回当前点击事件的对象(主要应用在循环出来的dom元素设置点击时,返回当前被点击的dom对象)

我的需求:点击div时就将我点击的这个div里面的button显示出来,再次点击就隐藏
首先看看循环出来的HTML代码模块

<div class="lession" v-for="data in course_data.lessions" @click="showbutton(data.teachers,$event)">
 <div class="ltitle">
    <div>{{data.title}}</div>
  </div>
  <div class="lbutton">
    <b-button type="submit" :class="data.title" variant="primary" @click="joinlession(data.id)">进入教室</b-button>
  </div>
</div>

注意到我这里设置一个div的点击事件,那么下面就是点击这个div时,就获取点击的那个dom对象。
看js部分的代码。

methods: {
      showbutton(teachers,e) {
        var eventdom = e.target //获取点击的dom对象
        var needbutton = eventdom.children[1] //获取我需要的那么button的div
        console.log(needbutton.style.display)
        // 判断这个div的display状态,是block就设置为none,否则相反
        if (needbutton.style.display === 'none' || needbutton.style.display === '') {
          needbutton.style.display = 'block'
        } else {
          needbutton.style.display = 'none'
        }
        this.teacher = teachers[0].name
        this.assistant = teachers[1].name
      }
    },

猜你喜欢

转载自blog.csdn.net/haeasringnar/article/details/81475708