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

[조승래]

함수를 어떻게 작성해야 할까요?

<li v-for="(a, i) in 채팅방목록" :key="i" @click="채팅방선택(i)"  class="list-group-item" :style="">

방법을 모르겠습니다...
눌린 박스는 배경색이 바뀌고 다른 박스를 누르면 눌렸던 박스는 원래 색상으로 되돌리고 싶습니다.
스타일에 함수로 바인딩 해봤더니 선택한 박스만 바뀌는 게 아니라 전체 박스 색상이 다 바뀌는 상황이;;

[codingapple]

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

[조승래]

조언 감사합니다. 덕분에 해결했어요!
클래스 안에 조건문 거는 방법도 알게 되었구요. 


<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>

[글쓴이]

글