怎么讓對應的Key的div顯示

我想讓鼠標經過圖片時顯示對應的圖片底下的三個按鈕，但是每次經過所有的按鈕都顯示了，因為我判斷的是當鼠標經過時就顯示，那么該怎么改這段代碼能讓鼠標經過對應的key時，顯示對應的div底下的按鈕呢？

<ul>
    <li class="course-step-li" v-for="(item,key) in stepList"
        @mouseenter="over = true"
        @mouseleave="over = false"
        @mousedown="stepMousedown(key,'course-step-li')"
        @mouseup="stepMouseup(key,'course-step-li',stepList)"
        :data-id="item.id"
        :data-key="key">
        <div class="li-wrap">
            <div class="step-card-img">
                <img class="step-img" :src="item.thumb_robot ? item.thumb_robot : '../../images/right-icon.jpg'" />
            </div>
            <div v-if="over === true" class="step-card-cont">
                <div class="title">{{ item.title }}</div>
                <el-button type="primary" size="small">編輯</el-button>
                <el-button type="primary" size="small">更換</el-button>
                <el-button type="danger" size="small">刪除</el-button>
            </div>
            <div v-else class="step-card-cont">
                <span class="step-name">{{ item.title }}</span>
            </div>
        </div>
    </li>
                    </ul>

回答

編輯回答

毀憶

我覺得你可以直接用css hover去做就行了

2017年7月26日 14:13

編輯回答

枕頭人

把你的mouseover邏輯改一下，不能使統(tǒng)一的over來控制。
設置一個curKey，就是當前激活的那個，mouseover的時候設置一下，出去的時候置空。
v-if顯示邏輯也根據curKey是否等于key來判斷
@mouseenter="curKey = key"
@mouseleave="curKey = ''"
v-if="curKey === key"

<ul>
    <li class="course-step-li" v-for="(item,key) in stepList"
        @mouseenter="curKey = key"
        @mouseleave="curKey = ''"
        @mousedown="stepMousedown(key,'course-step-li')"
        @mouseup="stepMouseup(key,'course-step-li',stepList)"
        :data-id="item.id"
        :data-key="key">
        <div class="li-wrap">
            <div class="step-card-img">
                <img class="step-img" :src="item.thumb_robot ? item.thumb_robot : '../../images/right-icon.jpg'" />
            </div>
            <div v-if="curKey === key" class="step-card-cont">
                <div class="title">{{ item.title }}</div>
                <el-button type="primary" size="small">編輯</el-button>
                <el-button type="primary" size="small">更換</el-button>
                <el-button type="danger" size="small">刪除</el-button>
            </div>
            <div v-else class="step-card-cont">
                <span class="step-name">{{ item.title }}</span>
            </div>
        </div>
    </li>
</ul>

2017年7月28日 19:58