我的需求:点击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
}
},