vue3 js 목록에서 마우스 오버 시 글자, 버튼 등 나타나게

vue.js 에서 목록에서 Loop 문에서 아이템에 마우스 오버 시 글자 나타나게 하는 방법을 알려드립니다.

소스를 보면 아주 간단합니다.

loop 의 key 값을 비교해서 보이게 안보이게 처리하는 것이 특징이며,

v-bind:key 값을 index 로 사용해도 됩니다.

 

CSS로 처리하는 방법도 있지만, 이렇게 하는 것이 더 편하니 꼭 기억해서 사용하시기 바랍니다.

createApp({
    setup() {
        const action = ref(null);
       
        onMounted(() => {
        })

        return {
            action
        }
    }
})
.mount('#app')

<div v-for="(item, index) in resultData" v-bind:key="item.id">
    <button v-on:mouseover="action = index" v-on:mouseleave="action = null"><b>{{item.name}}</b> <span class="badge text-bg-info" v-show="action === item.id">선택</span></button>
</div>