vue v-for 点击的时候显示隐藏v-for里面的一条div

Question

旁边的黄条就是我需要隐藏。 点击显示出来。。

该怎么写。 一点概念都没用

Answer 1

http://jsrun.net/43YKp

直接上示例

Answer 2

this.$el.querySelectorALL(".left_title")[index].style.display="none"

或者

<div v-on:click="titleShow"></div>

titleShow:function (that) {        
    that.currentTarget.style.display="none"
}

Answer 3

给每条数据里面加上一个状态isShow: false

@click="item.isShow = !item.isShow"
<div class="left_bar" v-if="item.isShow"></div>

Answer 4

<div @click="isShow = !isShow">
    <div class="left_bar" v-if="isShow"></div>
</div>
data: {
    isShow: false
}

Answer 5

也可以写两个样式，然后 v-bind:class="{ 'show': isA, 'hide': !isA }"

Answer 6

核心还是给要显示的子元素设置一个显示条件，比如上面用到的一个新 data 变量 highlightIndex
然后点击父元素的时候去设置