vue.js 선택값 활성화

돼지·2022년 7월 13일
0

개발공부

목록 보기
13/17
<button
  v-for="list in arr"
  :key="list.id"
  :class="['oval', { active: select === list.name }]"
  @click="select = list.name"
>
<img :src="${list.img}`">
<div v-text="list.ctgry" />
</button>

<style lang="scss">
  .oval {
    width: 104px;
    height: 146px;
    &.active .img {
      border: solid 2px #5255e6;
      background-color: #fff;
    }
    &.active .txt {
      color: #5255e6;
    }
  }

</style>

나처럼 멍청이는 없겠지만 버튼태그 속 :class의 active는 데이터로 빼는 줄 알았다.
그냥 스타일태그 안에 해당 클래스를 입력하면 되는것

profile
먐미

0개의 댓글