• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Vue 게시판 v-for로 만든 div박스들에서 선택한 박스만 스타일을 바꾸려면

v-for로 만든 div박스들에서 선택한 박스만 스타일을 바꾸려면

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #52437

    조승래
    참가자
    함수를 어떻게 작성해야 할까요?
    
    <li v-for="(a, i) in 채팅방목록" :key="i" @click="채팅방선택(i)"  class="list-group-item" :style="">
    
    방법을 모르겠습니다...
    눌린 박스는 배경색이 바뀌고 다른 박스를 누르면 눌렸던 박스는 원래 색상으로 되돌리고 싶습니다.
    스타일에 함수로 바인딩 해봤더니 선택한 박스만 바뀌는 게 아니라 전체 박스 색상이 다 바뀌는 상황이;;
     
    #52464

    codingapple
    키 마스터
    동적인 UI 만들고 싶으면 
    몇번째 박스가 배경색이 바뀔지 숫자같은걸 저장해두는 data하나 만들어두고
    data 값에 따라서 박스색 바뀌라고 코드짜놓으면 됩니다
    #52568

    조승래
    참가자
    조언 감사합니다. 덕분에 해결했어요!
    클래스 안에 조건문 거는 방법도 알게 되었구요. 
    
    
    <template>
        <div style="margin:10px; width:100px;">
          <div @click="누름(i)" v-for="(a, i) in 데이터" :key="i"
            :class="{'css': i === 누른번호, 'button':true}">
            {{ a }}
          </div>
        </div>
      </template>
      <script>
      export default {
        name: 'Test-a',
        data () {
          return {
            데이터: ["버튼1", "버튼2", "버튼3", "버튼4", "버튼5"],
            누른번호:0
          }
        },
        methods: {
            누름(i){
                this.누른번호=i
            }
        },
      }
      </script>
      <style scoped>
        .css {
          color: red;
        }
        .button{
            text-align : center;
            border : 1px solid black
        }
      </style>
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠