vue v-for循环内部点击切换

1,376 阅读1分钟

还是对vue的不够熟悉,试了很久才想通的,有时候思维就固定在一个方法,不会转弯,还是要多思考多看

1。v-for循环后要点击两个按钮切换显示不同的div

    <span @click="transferShow(index)" :class="activeIndex===index?'isActive':''">划转</span>
    <span @click="InwardShow(index)" :class="activeInward===index?'isActive':''">内转</span>

2. 在两个div上加上设定的值

<div class="transfer" v-show="activeIndex===index"></div>
<div class="Inward" v-show="activeInward === index"></div>
    data() {
        return {
            activeIndex: -1,
            activeInward: -1,
        }
    }
    methods{
        transferShow(index) {
          this.activeIndex = this.activeIndex == index? -1 : index
          this.activeInward = -1
        },
        InwardShow(index){
          this.activeInward = this.activeInward == index? -1 : index
          this.activeIndex = -1
        },
    }